亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

切換對象屬性VueJS?

切換對象屬性VueJS?

天涯盡頭無女友 2022-10-27 16:55:55
我有一個數組cars,它返回我的名字,他們每個人都有一個屬性starred,我想來回切換真假。但是我想一次只為其中一個設置 starred 為 true 。所以我創建了一個方法setStarred,在方法內部,我使用 amap將其他設置為 false。但是,我可以將星號設置為 true,但是我無法將其設置回 false。請檢查此Codepen這是工作示例new Vue({  el: "#app",  data() {    return {      cars: [{          name: "Toyota",          starred: false        },        {          name: "BMW",          starred: false        },        {          name: "Ford",          starred: false        }      ]    };  },  methods: {    setStarred(index) {      this.cars.map((i) => {        i.starred = false;      });      this.cars[index].starred = !this.cars[index].starred;    }  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" /><div id="app">  <v-app id="inspire">    <v-container>      <v-layout justify-center column>        <v-flex xs6 v-for="(car,index) in cars" :key="index">          <h2>{{car.name}}            <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(index)">star_border            </v-icon>          </h2>        </v-flex>      </v-layout>    </v-container>  </v-app></div>本質上,我正在嘗試將所選內容設置回 false。任何幫助將不勝感激。謝謝
查看完整描述

2 回答

?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

嘗試這個:


this.cars[index].starred = !this.cars[index].starred;

this.cars.map((i) => {

     if(i.name!=this.cars[index].name)

          i.starred = false;

});


查看完整回答
反對 回復 2022-10-27
?
PIPIONE

TA貢獻1829條經驗 獲得超9個贊

我更喜歡先保存目標的“已加星標”狀態,然后再切換它。


如果是這樣,您不需要在 for 循環中放置一條if語句。雖然在這種情況下,它并沒有大大提高性能,但我相信避免太多if from for-loop是一個好習慣。


下面是示例:


new Vue({

  el: "#app",

  data() {

    return {

      cars: [{

          name: "Toyota",

          starred: false

        },

        {

          name: "BMW",

          starred: false

        },

        {

          name: "Ford",

          starred: false

        }

      ]

    };

  },

  methods: {

    setStarred(index) {

      let cur = this.cars[index].starred

      this.cars.forEach((i) => {

        i.starred = false;

      });

      this.cars[index].starred = !cur;

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />


<div id="app">

  <v-app id="inspire">

    <v-container>

      <v-layout justify-center column>

        <v-flex xs6 v-for="(car,index) in cars" :key="index">

          <h2>{{car.name}}

            <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(index)">star_border

            </v-icon>

          </h2>

        </v-flex>

      </v-layout>

    </v-container>

  </v-app>

</div>


查看完整回答
反對 回復 2022-10-27
  • 2 回答
  • 0 關注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號