vue2 渲染 String数组 到Elementui中

你可以使用`v-for`指令和`el-tag`组件来渲染一个字符串数组到`ElementUI`中。以下是一个示例代码：

<el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>

在上面的代码中，`tags`是一个字符串数组，我们使用`v-for`指令将每个元素都渲染成一个`el-tag`组件。`:key`指令用来为每个组件添加一个唯一的标识符，以优化渲染性能。

你可以将上面的代码添加到你的`Vue`组件模板中，以渲染一个字符串数组到`ElementUI`中。

相关问题

解决vue对象中的数组的值发生改变不渲染

当Vue对象中的数组的值发生改变但没有触发视图的重新渲染时，可以考虑使用Vue的响应式属性来解决这个问题。

Vue中的响应式属性主要是依赖于Vue的Observer（观察者）来实现的。它会自动追踪对象的属性，并在属性发生变化时自动更新相关的视图。

解决这个问题的方法是使用Vue提供的数组变异方法，比如push、pop、splice等，而不是直接赋值或者改变数组的索引。

例如，如果我想在Vue对象的数组中添加一个新的值，可以使用push方法，而不是直接赋值。这样，Vue会自动追踪到数组的变化，并更新相关的视图。

另外，如果直接修改数组的索引，Vue也无法追踪到数组的变化。在这种情况下，可以使用Vue提供的$set方法，手动通知Vue数组的变化。

例如，如果我想修改数组中指定索引位置的值，可以使用$set方法来告诉Vue数组已经发生了变化。具体的代码如下：

Vue.set(array, index, newValue);

总之，要确保Vue对象中的数组能够正常渲染，需要使用Vue提供的响应式属性，并遵循Vue的数组变异规则。这样，当数组发生变化时，Vue会自动更新相关的视图，实现数据和视图的同步更新。

vue2 watch 监听数组

在Vue2中，如果要监听数组的变化，可以使用`watch`方法来监听数组，但是需要注意的是，如果数组中的元素发生改变，`watch`方法是无法检测到的，因为Vue2只能监听到数组的变异方法，而不是数组中元素的变化。

下面是一个例子，演示如何使用`watch`方法监听数组的变化：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  watch: {
    list: function(newVal, oldVal) {
      console.log('list changed:', newVal, oldVal);
    }
  },
  mounted() {
    // 修改数组，会触发watch方法
    this.list.push('watermelon');
  }
}
</script>

在上面的例子中，我们在`watch`选项中监听了`list`数组的变化。当我们在`mounted`钩子函数中向数组中添加一个元素时，会触发`watch`方法，并输出新旧值。

然而，如果我们直接修改数组中的某个元素，`watch`方法是无法检测到的。如果要监听数组中元素的变化，可以使用`$watch`方法或者使用Vue提供的`$set`方法将数组中的元素设置为响应式数据。