[在循环使用HTML对象时,我需要在Vuejs2中调用监视程序的帮助

问题描述 投票:0回答:1

我在单击按钮时添加一个对象,并在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下拉列表,它将使用@input调用一个函数userInput()。传递的值将是“字符串”或“数字”。 Vue Mehods在下面,

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,那么它也会影响第一行的输入字段(两行的key.name都被启用或禁用)。我只需要更改特定的文本字段即可。因此,所有的文本字段都被禁用,即使它是“数字”。这是我在VueJS中的第一个项目。非常感谢任何人在此方面的帮助。预先感谢。

vue.js vuejs2 watch
1个回答
0
投票

您需要管理每个键的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");
},

推荐问答