1

假设我有以下结构：

// parent template
<div v-for="item in items">
   <span>Parent</span>
   <children1>
      // inside children1, i got another children
      <children2 @on:finished="onFinished"></children2>
      <button>Click me</button>
   </children1>
</div>

然后在 children1 中methods我会有这样的东西来听 children2：

methods: {
    onFinished: function () {
       // Here i would like to disable `click me` button and change its text for this particular item inside the iteration
    }
}

从children2开始，我只是在其中完成某些事情时执行此操作。

this.$emit('on:finished', true)

正如我在该方法的内部所写，我希望能够使用 VueJS 仅更改 $emit 子项中的一项。但是我正在考虑使用数据属性，但这会影响整个模板，那么使用计算呢？那行得通吗？但如何？

有什么建议么？

4

3 回答 3

2

您似乎缺少数据道具来跟踪每个子组件的禁用状态。查看此示例是否是您要查找的示例，单击每个孩子的完成按钮将禁用另一个按钮：

Vue.component('child-component', {
  props: ['disabled', 'text'],
  template: `<div><button :disabled="disabled">{{ text }}</button><button @click="$emit('finished')">Finish</button></div>`
})

new Vue({
  el: '#app',
  data () {
    return {
      children: []
    }
  },
  mounted () {
    this.children = Array.from(Array(10), (x,i) => {
      return {
        id: i,
        disabled: false,
        text: 'Click Me'
      }
    })
  },
  methods: {
    onFinished (e, i) {
      this.children[i].disabled = !this.children[i].disabled
      this.children[i].text = this.children[i].disabled ? 'Disabled' : 'Click Me'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>Parent</span>
  <child-component :disabled="child.disabled" :text="child.text" v-for="(child, i) in children" @finished="onFinished($event, i)" :key="child.id"></child-component>
</div>

于 2018-12-22T19:14:43.107 回答
1

首先，你需要正确地听孩子发出的声音

  <div v-for="(item,index) in items">
   <span>Parent</span>
   <children :myIndex='index' @finished="onFinished"></children>
   <button>Click me</button>
  </div>

请注意，我还为您的孩子添加了一个索引，该索引必须被接受为您的子组件中的道具

props:[myIndex]

onFinished()父组件中的方法在哪里。

在您的子组件中，像这样发出

this.$emit('finished', {state: true, index: myIndex})

现在，您可以在方法中使用此索引 -

onFinished(itemState){
this.items[itemState.index].state = itemState.state
}
于 2018-12-22T19:24:52.393 回答
-1

您可以使用项目索引来更改他的状态。

    data: function () {
     items: [
       {
          enabled: true  
       },
       {
          enabled: true
        }
    ]

对于禁用功能：

disableItem (index) {
  this.items[index].enabled = false
}

在模板中：

<div v-for="(item, index) in items">
<span>Parent</span>
<children @on:finished="disable(index)"></children>
<button>Click me</button>
</div>
于 2018-12-22T19:27:04.867 回答