Question

当我在父Vue中单击子组件时，代码背后的想法是使子组件处于活动状态。

父vue文件：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

子组件：

props: {
  selected: Boolean
},

data () {
  return {
    selected: selected
  }
},

如何将点击时的selected道具发送给子组件？如果我这样设置：

<PackageItem
  :selected="true"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

这将使所有项目都选择为true，我只想单击即可设置。

Answer 1

您可以这样做：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

selectedPackageItem方法将设置选定的程序包的位置：

selectPackageItem(packId, packLabel, packPrice, packIndex) {
    this.$set('selected', packId, true)

或者，如果您希望在点击时在真假之间切换：

this.$set('selected', packId, !this.selected[packId])

在数据选项中，您应该只有：

selected: []

此外，在您的子组件中，不需要以下代码：

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

要在脚本中使用选定的道具时，只需使用this.selected，在模板中只需使用selected。

Answer 2

您可以通过定义用于存储所选ID的数组和用于检查选择的函数来控制从父组件进行的选择。

data(){
    return {
        ...
        selected: []
    }
},
methods: {
    isSelected(id){
        return this.selected.indexOf(id) > -1;
    }
}

然后在您的click方法中，推送被单击项的ID。

// Stub for `selectPackageItem` method
if(this.isSelected(id)){
    // Maybe unselect?
} else {
    this.selected.push(id);
}

现在您的模板变为：-

<PackageItem v-for="pack in packagesData" :selected="isSelected(pack.id)" :key="pack.id" @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)">

Answer 3

最后我得到了一个更优雅的解决方案：

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  :selected="selectedPackages(pack.index)"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

然后添加了一种检查数组中选定包的方法：

selectedPackages (index) {
  let packages = this.packages
  let selected = packages.some(p => p.index === index)
  return selected
}

selectedPackages返回一个布尔值。 this.packages是一个带有活动包的数组（单击），除了ID和index之外还包含许多信息。如果单击的项.some与数组中的项true完全相同，则使用false可以获得index或this.packages的值。

如何在点击时将道具传递给子组件-Vue2

3 个答案: