Question

我需要从Vue模板中的v-for循环访问数据。我不知道如何。这是我到目前为止的内容：

Vue.component('artikel-lista', {
  template:`
  <ul>
  <artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" target="_blank" class="button tiny">Läs mer</a></artikel>
  </ul>
  `,
  data(){
    return{
      artiklar: App.artiklar
    }
  },

  created(){
    Event.$on('isSelected', function() {
      // here I need to access for example artikel.title from the v-for loop
    });
  },

});

事件侦听器Event。$ on（）正在接收一个事件（该部分起作用）。发生这种情况时，我想从v-for循环中的artikel.title等获取值。我该怎么办？

编辑：有关该问题的更多信息...我有一个项目列表，每个项目前面都有一个复选框。我需要从选中的li元素中获取值。因此，当在一个Vue组件中单击复选框时，我会发出一个事件，并在另一个Vue组件中侦听该事件，我想在其中获取当前的“ artikel”值并将其存储。

我现在意识到需要重新考虑这一点，而是单击“提交”按钮（添加项）时查看选中了哪些复选框，而不是单击复选框时看到了。但是我认为仍然存在从循环外的v-for循环获取值的问题...

这是另一个Vue组件（发送事件）：

Vue.component('artikel',{
  template: '<li style="list-style-type:none;"><input @change="isSelected" type="checkbox" class="kryssruta" /><slot></slot></li>',

  methods:{
    isSelected(){
      Event.$emit('isSelected');
    },
  }

});

第一行代码是这样：

window.Event = new Vue();

以便我可以使用“事件”在组件之间发送事件。

自定义元素<artikel-lista></artikel-lista>用于第三个Vue组件。结果是一个项目列表，每个列表项目前面都有一个复选框。

如何从Vue JS中的v-for循环中获取价值

0 个答案: