Есть ли способ смотреть входы, когда мы используем цикл v-for

Question

У меня есть массив объектов, и я повторяю цикл с помощью v-for, и мне нужно наблюдать за входами, основываясь на выбранном мной значении.

<tr v-for="(key, index) in NewArr" v-bind:key=value>
<td>
    <multiselect
        v-model="key.NameSelected"
        :loading="Loading"
        :options="NameList"
        :closeOnSelect="true"
        placeholder="Select One - type to search..."
        selectLabel='select'
        deselectLabel='remove'
    ></multiselect>
</td>
<td class="modify-td-padding__multi">
    <div class="modify-input-fixed-width">
        <input type="text" name="ValueSelected"
        v-model="key.ValueSelected"
        class="input-increase-height">
    </div>
</td>

Здесь мне нужно следить за ключом. Имя выбрано. Я не знаю, как это сделать, поскольку я новичок в VueJS. Я застрял в этой точке. Кто-нибудь, пожалуйста, помогите.

Я пробовал обычный метод смотреть, как,

NameSelected: function () {}

Answer 1

Вы можете вызвать метод, когда пользователь вводит что-то. Как:

В вашем шаблоне добавьте:

<multiselect @input="userInput(key.NameSelected)"></multiselect>

в вашем скрипте:

methods:{
 userInput(input){
  console.log(input);
 }
}

Вы можете увидеть документы

Answer 2

Вы можете только смотреть data свойства / props / computed Vue компонента.

Таким образом, вы не можете смотреть key.NameSelected, который является локальным для элемента цикла шаблона. Вместо этого вы можете смотреть NewArr, которое, как я предполагаю, является свойством данных.

watch: {
 NewArr: {
  handler (newValue, oldValue) {
   // Issue: but, this will be invoked if anything inside NewArr will change
  }
 }
} 

Вместо этого, если вы хотите найти изменение определенный выбор , я рекомендую вам использовать событие .

<multiselect
    v-model="key.NameSelected"
    :loading="Loading"
    :options="NameList"
    :closeOnSelect="true"
    placeholder="Select One - type to search..."
    selectLabel='select'
    deselectLabel='remove'
    @input="handleInput" <-- Trigger handleInput for specific multiselect
></multiselect>

export default {
 methods: {
  handleInput (value, id) {
   // do something with value & id
  }
 }
}

PS: вы можете использовать другие события , а также @input в соответствии с вариантом использования. сделать c