Vue.js 选中项从数组1中生成，并将选中项传递给数组2，然后从数组2的渲染列表中隐藏选中项

首先，请检查我发现的这支钢笔，概念与我的问题相似。我希望通过Vue.js实现，但很抱歉我不知道

我想问的问题是，如果用户单击数组1中的列表项，我将数组1命名为

动物

，结构如下所示。然后，它会将单击的项目传递到数组2，数组2作为

希望的宠物列表
。例如，如果
{displayName:“Kitty”，value:“cat”}
从
动物
列表中单击，
动物
&
宠物列表
也存储此对象。当同一个对象在两个数组中时，
animals
元素的呈现将隐藏该对象在HTML中的输出；它还以按钮的形式呈现到
所希望的宠物列表。如果单击
愿望宠物列表
的项目按钮，它将从
愿望宠物列表
中删除对象数据，并可以访问
动物
HTML列表。它可以再次循环

数据的设置，默认值：

data: () => ({
    animals: [
        {displayName: "Kitty", value: "cat"},
        {displayName: "Puppy", value: "dog"},
        {displayName: "Chick", value: "bird"},
        {displayName: "Fawn", value: "Deer"},
        {displayName: "Joey", value: "Kangaroo"},
        {displayName: "Piglet", value: "pig"},
        {displayName: "Fry", value: "fish"},
        {displayName: "Polliwog", value: "frog"}
    ],
    wished_pets_list: [],
    wished_pets_list_formatted: []
}),

我尝试过的东西，使其成为HTML：

<div v-for="item in wished_pets_list">
    <span @click="removeSelected(item.value)">{{item.displayName}}</span>
</div>

<div class="dropdown-list-container">
    <div class="dropdown-list" v-for="(item, index) in animals">
        <label :for="'givenID' + item.index" @click="pushSelect(item.value)">{{index}}{{item.displayName}}</label>
        <input type="checkbox" v-model="wished_pets_list" :value="{'displayName': item.displayName, 'value': item.value}" :id="givenID' + item.index">
    </div>
</div>

<!-- a hidden text field to submit the formatted as value only -->
<input type="text" v-model="wished_pets_list_formatted" name="anyName" v-show>

谢谢，如果可以的话，请制作一个类似的代码笔或jsfiddle。
下面是Vue中示例代码笔的实现（没有包括搜索部分，因为我认为它与本例相关）

模板：

对于CSS，您可以使用codepen示例中的一个。
基于@Allkin的答案和我的附加要求，我尝试用一个有序的列表做出类似于Allkin的答案

模板：


你的入围名单

{{animal.displayName}



{{animal.displayName}

希望\u宠物\u列表\u格式：
{{希望宠物列表格式化}


动物：
{{动物}

js:

var vm=new Vue({
el:“应用程序”，
数据（）{
返回{
组织和动物名单：[
{displayName:“Kitty”，value:“cat”}，
{displayName:“Puppy”，value:“dog”}，
{displayName:“Chick”，value:“bird”}，
{显示名称：“小鹿”，值：“鹿”}，
{显示名称：“乔伊”，值：“袋鼠”}，
{显示名称：“小猪”，值：“猪”}，
{displayName:“Fry”，value:“fish”}，
{displayName:“Polliwog”，值：“frog”}
],
动物：空，
希望宠物清单：[]，
希望宠物列表格式：[]
};
},
方法：{
addToList（索引、值、id）{
console.log（“添加：”+值）；
this.wished_pets_list.push（this.animals[index]）；
这个.push\u pets\u list\u格式化的.push（值）；
this.anists[index]。选中=！this.anists[index]。选中；
},
removeFromList（索引、值、id）{
var self=这个；
这是一个列表拼接（索引，1）；
此.forEach（函数（项，索引）已格式化.forEach{
如果（项==值）{
自选宠物列表格式拼接（索引，1）；
}
});
for（var i=0；i

我首先添加了一个原始列表，然后它将在Vue装载之前进行克隆。此操作允许开发人员将原始数据用于其他用途

对于完整的示例，请检查
，但是如果我想列出下面的列表，请不要更改init render的顺序。我希望下的订单是：基蒂>小狗>小鸡>小鹿>乔伊>小猪>油炸>波利沃。因为你的例子是现在当我添加到短名单，它将从下面的名单中删除。当从短名单中删除时，它将添加回下面的列表，但插入下面列表的末尾。我想插回原来的订单。
methods: {
    removeSelected(value){
        this.wished_pets_list_formatted.push(value);
    },
    pushSelect(value){
        this.wished_pets_list_formatted.splice(value);
    }
},

<div id="app">
  <div data-reactroot="">
   <main>
      <div class="favourites">
         <h4>Your Shortlist</h4>
         <ul>
           <li class="girl" v-for="(animal, index) in wished_pets_list" @click="removeFromList(index)">{{animal.displayName}}</li>
         </ul>
         <hr>
      </div>
      <ul>
         <li v-for="(animal, index) in animals" :key="animal.value" class="boy" @click="addToList(index)">{{animal.displayName}}</li>

      </ul>
   </main>
</div>
</div>

var vm = new Vue({
    el: "#app",
  data () {
    return {
      animals: [
        {displayName: "Kitty", value: "cat"},
        {displayName: "Puppy", value: "dog"},
        {displayName: "Chick", value: "bird"},
        {displayName: "Fawn", value: "Deer"},
        {displayName: "Joey", value: "Kangaroo"},
        {displayName: "Piglet", value: "pig"},
        {displayName: "Fry", value: "fish"},
        {displayName: "Polliwog", value: "frog"}
    ],
    wished_pets_list: [],
    wished_pets_list_formatted: []
    }
  },
  methods: {
    addToList(index) {
      this.wished_pets_list.push(this.animals[index])
      this.animals.splice(index, 1)
    },
    removeFromList(index) {
      this.animals.push(this.wished_pets_list[index])
      this.wished_pets_list.splice(index, 1)
    }
  }
});

<div id="app">
  <div>
    <div class="favourites">
      <h4>Your Shortlist</h4>
      <ul>
        <li class="girl" v-for="(animal, index) in wished_pets_list" @click="removeFromList(index, animal.value, animal.id)">{{animal.displayName}}</li>
      </ul>
      <hr>
    </div>
    <ul>
      <li v-for="(animal, index) in animals" :key="animal.value" class="boy" @click="addToList(index, animal.value, animal.id)" v-show="!animal.checked">{{animal.displayName}}</li>

    </ul>
    <span>wished_pets_list_formatted:</span>
    <div>{{wished_pets_list_formatted}}</div><br><br>
    <span>animals:</span>
    <div>{{animals}}</div>
  </div>
</div>

var vm = new Vue({
  el: "#app",
  data() {
    return {
      org_animal_list: [
        { displayName: "Kitty", value: "cat" },
        { displayName: "Puppy", value: "dog" },
        { displayName: "Chick", value: "bird" },
        { displayName: "Fawn", value: "Deer" },
        { displayName: "Joey", value: "Kangaroo" },
        { displayName: "Piglet", value: "pig" },
        { displayName: "Fry", value: "fish" },
        { displayName: "Polliwog", value: "frog" }
      ],
      animals: null,
      wished_pets_list: [],
      wished_pets_list_formatted: []
    };
  },
  methods: {
    addToList(index, value, id) {
      console.log("added: " + value);
      this.wished_pets_list.push(this.animals[index]);
      this.wished_pets_list_formatted.push(value);
      this.animals[index].checked = !this.animals[index].checked;
    },
    removeFromList(index, value, id) {
      var self = this;
      this.wished_pets_list.splice(index, 1);
      this.wished_pets_list_formatted.forEach(function(item, index) {
        if (item == value) {
          self.wished_pets_list_formatted.splice(index, 1);
        }
      });
      for (var i = 0; i < this.animals.length; i++) {
        if (self.animals[i].id == id) {
          self.animals[i].checked = !self.animals[i].checked;
        }
      }
    }
  },
  beforeMount: function() {
    this.animals = this.org_animal_list;
    for (var i = 0; i < this.animals.length; i++) {
      this.$set(this.animals[i], "checked", false);
      this.$set(this.animals[i], "id", i);
    }
  }
});