Question

<div v-if="result.length" style="clear:both">
      <div v-bind:key="item.id" v-for="item in result">
        <div class="ui form">
          <div class="field">
            <label>Content</label>
            <textarea name id cols="30" rows="10">{{item.content[0]}}</textarea>
          </div>
          <div class="field right aligned">
            <button v-bind:id="item.id" @click="updateData" class="ui primary button">Update</button>
          </div>
      </div>
</div>

具有此迭代，id喜欢访问updateData函数调用中“当前”文本区域的值。我以为将id分配给textarea输入作为$ref，但似乎有点不对劲。感谢Ayn的帮助，谢谢！

Answer 1

使用参考数组

您需要使用v-for的索引值

并通过索引访问参考

<div v-bind:key="item.id" v-for="(item, index) in result">

<textarea ref="textarea" name id cols="30" rows="10">{{item.content[0]}}</textarea>

<button v-bind:id="item.id" @click="updateData($refs.textarea[index])" class="ui primary button">Update</button>

Answer 2

您可以对文本区域使用数据绑定，并将当前项传递到更新功能：

Vue.config.productionTip = false; // suppress

new Vue({
    el: "#app",
    data: {
        result: [
           {id:0,content:['some content']},
           {id:1,content:['some content']},
           {id:3,content:['some content']},
        ]
    },
    methods:{
        updateData(item){
            alert(item.content[0]);
        }
    }
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div v-bind:key="item.id" v-for="item in result">
    <div class="ui form">
      <div class="field">
        <label>Content</label>
        <textarea name id cols="30" rows="10" v-model="item.content[0]"></textarea>
      </div>
      <div class="field right aligned">
        <button v-bind:id="item.id" @click="updateData(item)" class="ui primary button">Update</button>
      </div>
  </div>
  
</div>

vuejs-在函数调用中访问动态创建的输入

2 个答案: