Vue中如何设置变量动态值或关联两个变量 修改变量页面不更新问题

• 数据赋值为值拷贝：你在data中初始化doors数组时，decor: this.ecoveneer_magma_oak是把ecoveneer_magma_oak的当前字符串值直接复制给了decor，二者不存在关联绑定。后续你修改ecoveneer_magma_oak的值，不会同步到doors数组里的decor属性，页面自然不会更新。
• 模板存在语法错误：你把{{ door.model }}写在了v-for循环外部，此时door变量未定义，本身就无法正常渲染值；另外swiper-slide上的door属性错误绑定了整个doors数组，应该绑定循环遍历得到的单个door对象。

如果你的需求是点击切换语言后，doors里对应的文案同步更新，推荐修改逻辑如下：

1. 调整changeLange方法，修改根变量的同时同步更新doors里的对应字段；
2. 修正模板的渲染逻辑，把需要展示的door属性放到v-for循环内部。

修正后完整代码 #

<template>
  <div>
    <swiper-slide
      v-for="door in doors"
      :key="door.id"
      class="card"
      :door="door"
    >
      <!-- 把需要展示的内容放到循环内部 -->
      <div class="modelName">{{ door.model }}</div>
      <div class="decorName">{{ door.decor }}</div>
    </swiper-slide>
    <!-- 如果需要展示选中的door，额外声明selectedDoor变量来控制即可 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      ecoveneer_magma_oak: 'Дуб Магма',
      doors: [
        {
          image: '1.jpg',
          model: '018 BG',
          ecoveneer_magma_oak: 'Дуб Бордо',
          decor: this.ecoveneer_magma_oak,
          id: '1',
        },
      ],
    }
  },
  methods: {
    changeLange(lang) {
      this.ecoveneer_magma_oak = 'Ecoveneer Magma Oak'
      // 同步更新doors里的decor值
      this.doors[0].decor = this.ecoveneer_magma_oak
      // 如果doors有多个元素，可以循环遍历更新：
      // this.doors.forEach(item => {
      //   item.decor = this.ecoveneer_magma_oak
      // })
    },
  },
}
</script>

如果不想每次修改都手动更新doors，也可以把decor提取为计算属性，或者把多语言文案统一放到单独的配置里，直接在模板中读取对应语言的字段即可。

内容的提问来源于stack exchange，提问作者Богдан Католик