Мне нужна помощь в вызове watcher в Vuejs2 при зацикливании объектов в HTML - PullRequest
Новая
       26

Мне нужна помощь в вызове watcher в Vuejs2 при зацикливании объектов в HTML

0 голосов
/ 26 марта 2020

Я добавляю один объект при нажатии на кнопку и отображаю его в HTML. Пользователь может выбрать выпадающие значения в настройках (строка или число). На основе ввода необходимо отключить или включить следующее поле ввода текста. Вот мой код HTML, 

<table>
<tr><button @click="add_new_input()">Add </button></tr>
<tr v-for="(key, index) in NewArr" v-bind:key=value>
    <td>
        <multiselect
            v-model="key.name"
            :options="NameList"
            selectLabel='select'
            @input="userInput(value)"
        ></multiselect>
    </td>
    <td class="modify-td-padding__multi">
        <input type="text"
        v-model="key.value"
        :disabled="isNumber"
        class="input-increase-height">
    </td>
</tr>
</table>

, если мы изменим выпадающий список key.name, он вызовет одну функцию userInput (), используя @input. передаваемое значение будет либо «строка», либо «число». Vue Методы приведены ниже, 

userInput: function (value) {
    this.getInputType(value);
},
getInputType: function (value) {
    if(value === "string") {
    this.isNumber = false;
} else {
    this.isNumber = true;
}
},
add_new_input: function () {
    let vm = this;
    vm.NewArr.push({
    name: '',
    value: '',
    });

    vm.$set(vm.NewArr, vm.name, vm.value);
}

add_new_input добавит новый объект в NewArr, функция getInputType проверит, является ли значение "string" или "number". Если это «строка», текстовое поле должно быть отключено, иначе включено.

Моя проблема в том, что если есть две строки, и если я выбираю key.name для 2-й строки, это влияет и на поле ввода первой строки (key.name для обеих строк, включаемых или отключаемых). Мне нужно внести изменения только в указанном c текстовом поле. Таким образом, все текстовые поля становятся отключенными, даже если это «число». Это мой первый проект в VueJS. Большое спасибо, если кто-нибудь поможет мне в этом. Заранее спасибо.

1 Ответ

0 голосов
/ 26 марта 2020

Вам нужно управлять isNumber на ключ, поэтому не просто 

data() {return {isNumber: false}}

, а: 

@input="userInput(key.name, value)"
:disabled="isNumber[key.name]"

data(){ return { isNumber: {} }}
...
onUserInput: function (key, value) {
    this.setIsNumber(key, value);
},
setIsNumber: function (key, value) {
   this.$set(this.isNumber, key, value !== "string");
},
...