Typescript Vue绑定数据和$set

我正在使用set函数来更改控制类的变量的值。变量已成功更改，但类本身未更改

Vue文件：

<template>
    <li v-for="item in menu">
        <a href="" :class="{ 'show' : item.showNavItems }" 
                   @click="[$set(item, 'showNavItems', !item.showNavItems), toggleNavItems(item)]">{{ item.title }}</a>
    </li>
</template>

<script lang="ts">
    import { Component, Prop, Emit, Vue } from 'vue-property-decorator';

    @Component({})
    export default class SideNavigation extends Vue {
        @Prop({ default: [] }) menu!: []

        toggleNavItems(item: any) {
            console.log(item);
        }

        created() {
            console.log(this.menu);
        }
    }
</script>

从“Vue属性装饰器”导入{Component，Prop，Emit，Vue}；
@组件（{}）
导出默认类SideNavigation扩展Vue{
@属性（{default:[]}）菜单！：[]
toggleNavItems（项目：任何）{
控制台日志（项目）；
}
创建（）{
console.log（这个菜单）；
}
}

菜单变量从细枝文件加载，如下所示：

<side-navigation v-bind:menu="{{ global_data.getSideMenu|json_encode}}"></side-navigation>

---

我可以看到showNavItems变量在每次单击后都会更改，但类“show”不会更改。我把这段代码移到了fiddle：我可以看到它正在工作，我真正的组件有什么问题

您的样式中没有添加显示的类名。 对于类绑定也使用方括号，如下所示

---

您的样式中没有添加显示的类名。 对于类绑定也使用方括号，如下所示

---

菜单变量是数组而不是对象。 根据需要，您应该对数组使用

$set

，例如

$set（arrayName、Index、newValue）

。 在你的情况下是这样的：

<li v-for="(item, index) in menu">
    <a 
      :class="{ 'd-none' : !item.showNavItems }" 
      @click="$set(menu, index, {showNavItems: !item.showNavItems ,title: item.title},)"
    >
   {{ item.title }}
   </a>
</li>

菜单变量是数组而不是对象。
根据需要，您应该对数组使用
$set
，例如
$set（arrayName、Index、newValue）
。
在你的情况下是这样的：

<li v-for="(item, index) in menu">
    <a 
      :class="{ 'd-none' : !item.showNavItems }" 
      @click="$set(menu, index, {showNavItems: !item.showNavItems ,title: item.title},)"
    >
   {{ item.title }}
   </a>
</li>


通过定义另一个数据变量解决了这个问题，该变量在从Twig文件传递数据后成为Vue.js对象

@Prop({ default: () => {} }) menuData!: []
menu: [] = this.menuData

通过定义另一个数据变量解决了这个问题，该变量在数据从Twig文件传递后成为Vue.js对象

@Prop({ default: () => {} }) menuData!: []
menu: [] = this.menuData

是的，我编辑了小提琴，但问题仍然存在。我似乎无法让它在我的组件上工作。是的，我编辑了小提琴，但问题仍然存在。我似乎无法让它在我的组件上工作。是的，小提琴按我的需要工作。但我的应用程序仍然无法运行。我的道具定义有可能是错误的吗@属性（{default:[]}）菜单！：[]@50，可能是因为您要传递到
菜单
道具的值不是反应性的。将该值指定给父组件中的数据属性，然后将该属性传递给prop。是的，这是真的。但是如果我没有父组件呢？我通过添加一个日期属性解决了这个问题，比如：private menuffinal:[]=this.menu；但这看起来不是一个好的解决方案，我想立即访问这个菜单。我想这不是Vue的工作方式？您可以向数据中添加
菜单
，并为其设置默认值：是的，fiddle可以根据需要工作。但我的应用程序仍然无法运行。我的道具定义有可能是错误的吗@属性（{default:[]}）菜单！：[]@50，可能是因为您要传递到
菜单
道具的值不是反应性的。将该值指定给父组件中的数据属性，然后将该属性传递给prop。是的，这是真的。但是如果我没有父组件呢？我通过添加一个日期属性解决了这个问题，比如：private menuffinal:[]=this.menu；但这看起来不是一个好的解决方案，我想立即访问这个菜单。我想这不是Vue的工作方式？您可以向数据添加
菜单
，并为其设置默认值：