我正在更新一个“运动”道具,该道具将发送到Vue中的“锻炼”组件。 在子组件中,我发出一个函数来增加您正在使用的集合。 该函数正在父组件中触发(我正在获取console.logs()),但子组件未重新呈现。

家长:

<ExerciseListItem
  v-for="(exercise) in exercises"
  v-on:completeSet="completeSet"
  v-on:selectExercise="selectExercise"
  v-bind:exercise.sync="exercise"
  v-bind:isActiveExercise="exercise.slug === activeExerciseSlug"
  v-bind:key="exercise.slug"
/>

方法:

methods: {
  completeSet: function(slug) {
    console.log("complete-set", slug);
    const exercise = this.getExerciseBySlug(slug);
    exercise.completedSets++;
    if (exercise.completedSets === exercise.totalSets) {
      this.completeExercise(slug);
    }
  },
  completeExercise: function(slug) {
    this.getExerciseBySlug(slug).isComplete = true;
    console.log("COMPLETE-exercise", slug);
  },
  getExerciseBySlug: function(slug) {
    return this.exercises.find(exercise => exercise.slug === slug);
  },
  selectExercise: function(selectedSlug) {
    this.activeExerciseSlug = selectedSlug;
  }
},

儿童模板

<li
  v-bind:class="{ 'white-box': true, complete: exercise.isComplete }"
  v-on:click="exercise.totalSets > 1 ? $emit('selectExercise', exercise.slug) : $emit('completeSet', exercise.slug)"
>

这是Github上的项目

和现场演示

帮助赞赏appreciated

#1楼 票数:0

如果需要,可以在发射后在父组件中调用this。$ forceUpdate(),这将强制重新渲染。

不知道有关子组件为何未自动触发更新的根本问题。

#2楼 票数:0

该组件未更新,因为prop的嵌套值没有反应性,因此,vue不会注意到它们正在更改。

如何在Vue中使嵌套属性具有反应性

以下内容适用于您的vue应用程序中的所有状态-无论它位于vuex存储区,您的data()选项还是prop

默认情况下,vue仅在声明状态时才使状态为反应性。 这意味着动态(在运行时)分配的状态不是被动的(例如, mounted() { this.bar = 'two' }不会在data()创建被动的属性bar )。

如果要动态创建反应性状态,则需要遵循两个规则:

  1. 所有属性都需要使用Vue.set(rootObject, key, value) (例如, mounted() { this.$set(this, 'bar', 'two') } - this.$set()Vue.set() )。 在这里阅读: Vue Doku

  2. 数组需要使用本机数组属性( Array.prototype.push()等)填充。 通过索引设置数组元素不会使这些元素具有反应性。 注意: Vue.set(rootArray, 1, value)也不起作用-因为它按索引设置元素。 在此处了解更多信息: Vue Gotchas

  ask by Ross Whitehouse translate from so

未解决问题?本站智能推荐:

1回复

Vue 组件:道具未定义

当我想将我的变量作为道具从一个 vue.js 文件传送到另一个文件时,它不起作用。 我已经看到这个问题很常见,但答案对我没有帮助。 我看不出我的代码有什么问题。 也许你可以看看它: ladedaten.vue:(路径:src\\components\\ladedaten.vue) Lade
2回复

将对象解析为道具,同时在子组件 VueJS 中循环它们

我有一个 Table 组件,我想使其可重用。 Table 组件接收一组对象并使用 v-for 指令循环遍历它们。 Table 组件如下所示: 然后我想在父组件中重用它并解析 tableData 是一个对象数组。 这工作正常,但我找不到访问属性的方法。 相反,我在每个 td 元素中获取整个对象
1回复

Vue 子道具不会在父项中的绑定值更改时更新

我正在使用 vue-property-decorator lib。 我有 2 个组件: parent和child , child是一个具有 prop 'modalHeader'的组件: <script lang="ts"> import { Component, Prop, Vue }
1回复

如何通过单击子组件之一来更新组件的 Vue 数组

我正在显示一个子组件数组,在子组件中,我需要单击一些文本以使THIS子组件推到数组的前面。 我已经尝试过,孩子看到的数组似乎没有任何帮助。 现在我已经试过与事件到母部件发出,我仍然似乎无法弄清楚如何与点击推动任何子组件到循环的开始IN子组件。 父组件和方法: 子组件的可点击文本和方法 因此
1回复

Vue 动态组件和动态道具

我有一个像下面这样的模态组件 <modal> <component :is="modalComponent" /> </modal> 我需要将不同的道具传递给动态组件。 组件 A 需要标题和名称数组 组件 B 需要标题、事件数
1回复

父组件中的数据更新后,子组件未从父组件接收道具

我有一个名为Report.vue模板,在该模板中,我还有名为dataSent:[]的data()属性。 在上述模板中,我将组件称为BarChart ,试图将包含dataSent[1,2,3,4,5...]等更新元素的dataSent数组传递给组件(BarChart),以便它可以显示图。 但是
3回复

当根组件中的值更改时,子组件中的 Vue.js props 值不会更新

我已经从我的根组件收到了道具。 通过我测试的<template> ,当根组件中的值发生变化时, {{firstdata}}会更新,但{{topic}}仍然与它获得的第一个值相同。 看起来像这样this.firstdata只存储一次数据而无需进一步更新。 我做return {topic:
2回复

vuejs-绑定到组件数据

我创建了一个简单的组件: https://jsfiddle.net/s08yhcda/1/ 但是我无法绑定到内部组件数据(计数器)。 组件如何将其数据公开给<slot>范围? 我知道“事件增加,道具减少”的想法。 但是我仍然认为有可能在其范围内(在<butto