更新列表并重新渲染 vue-template答案

【问题标题】：updating the list and re-render the vue-template更新列表并重新渲染 vue-template
【发布时间】：2021-12-12 12:03:48
【问题描述】：

我有一个场景，在某个点上，值的下拉列表将被更新。就像假设我们在下拉列表中有一个水果列表。在按键上，我将使用鲜花列表更新水果列表，这只是示例。如何实时更新列表？我深入阅读了反应性here 但我没有从中得到太多帮助.. 这个问题是这个问题的一部分here

【问题讨论】：

标签： javascript html css vue.js vuejs3

【解决方案1】：

new Vue({
  el: "#app",
  
  data: () => ({
type: 'fruits',
fruits: ['apple', 'banana', 'cherry'],
animals: ['cat', 'dog', 'rabbit'],
  }),
  
  computed: {
list() {
  return {
    fruits: this.fruits,
    animals: this.animals
  }[this.type]
}
  },
  
  methods: {
change(type){
  this.type = type
}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click.prevent="change('animals')">
    Animals
  </button>
  <button @click.prevent="change('fruits')">
    Fruits
  </button>
  
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

添加了一个简单的 sn-p 以显示如何根据某些选项使用反应性来显示列表。

【讨论】：

不，我认为你误会了，我不会有第二个列表，我将从后端获取它，除此之外，第一个 lis 本身应该被来自数据的第二个列表替换-基地
无论如何我找到了我的问题的解决方案，我只是将值辞去列表