vue js syn c модификатор не обновляет входное значение - PullRequest
Новая
       2

vue js syn c модификатор не обновляет входное значение

2 голосов
/ 09 апреля 2020

У меня есть вопрос новичка о модификаторе syn c в vuejs. В моем примере я хочу изменить значение входов в зависимости от события фокуса. Значением является Object inputsData, и я получаю его от app. В parent я передаю его в child, где он выполняет рендеринг. Я установил таймер, потому что хочу отправить запрос на сервер. Как вы можете видеть в методе handleFocusFromChild, он меняет меня на dataToBeChanged на newData (также войдите в систему через 4 секунды). Как я понял из vue guid , следует обновить и входное значение, но это не так, и я не понимаю почему, потому что dataToBeChanged теперь имеет новые значения из newData. Может кто-нибудь объяснить мне, почему и как я должен сделать, чтобы это работало?

Здесь я использую Родитель: 

import Parent from "./parent.js";

Vue.component("app", {
  components: {
    Parent
  },
  template: `
           <div>
             <parent :inputsData="{
                                   'firstElement':{'firstInputValue':'Hi there'},
                                   'secondElement':{'secondInputValue':'Bye there'}
                                    }"></parent>
           </div>
            `
});

Вот Родитель: 

import Child from "./child.js";
export default {
  name: "parent",
  components: {
    Child
  },
  props: {
    inputsData: Object
  },
  template: ` 
         <div>
           <child @focusEvent="handleFocusFromChild"
                  :value.sync="inputsData.firstElement.firstInputValue"></child>
           <child @focusEvent="handleFocusFromChild"  
                  :value.sync="inputsData.secondElement.secondInputValue"></child>
           </div>
            `,
  computed: {
    dataToBeChanged: {
      get: function() {
        return this.inputsData;
      },
      set: function(newValue) {
        this.$emit("update:inputsData", newValue);
      }
    }
  },
  methods: {
    handleFocusFromChild: function() {
      var newData = {
        firstElement: { firstInputValue: "Hi there is changed" },
        secondElement: { secondInputValue: "Bye there is changed" }
      };
      setTimeout(function() {
        this.dataToBeChanged = newData;
      }, 3000);

      setTimeout(function() {
        console.log(this.dataToBeChanged);
      }, 4000);
    }
  }
};

Вот ребенок: 

export default {
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input @focus="$emit('focusEvent', $event)"
                         v-model="value">
                </div>
              </div>
            `,
  props: {
    value: String
  }
};

1 Ответ

3 голосов
/ 09 апреля 2020

ваш дочерний компонент должен выдавать "this. $ Emit ('update: value', newValue)", поскольку событие просматривает документы: https://br.vuejs.org/v2/guide/components-custom-events.html

Также способ сделать это так: 

export default {
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input @focus="$emit('focusEvent', $event)"
                         v-model="valueProp">
                </div>
              </div>
            `,
  props: {
    value: String
  },
  computed: {
    valueProp:{
            get(){
                return this.value
            },

            set(val){
                return this.$emit("update:value", val);
            }
        },
  }
  methods: {
    handleFocus() {
      this.$emit("focusEvent");
    }
  }
};
...