第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

vue.js - 從對象獲取和顯示所需值的問題 - onclick

vue.js - 從對象獲取和顯示所需值的問題 - onclick

繁星淼淼 2022-12-18 16:16:24
我一直在用 vue.js 方法、指令、各種循環(huán)和高階函數(shù)嘗試很多事情,并嘗試了很多事情$this.refs…… 目標(biāo)是在點(diǎn)擊標(biāo)題時(shí)顯示一本書的描述(這是按鈕元素 - vue .js 模板,它的渲染工作正常 - 正確顯示):<section  v-for="(bookTitle, index) in books"      v-bind:key="index"            >    <button      ref="el"      @click="hidden = !hidden"      class="list-group-item"    v-if="bookTitle.title"    >{{bookTitle.title}}    </button></section>我獲取了一個(gè) API,并根據(jù)其屬性創(chuàng)建了一個(gè)數(shù)據(jù)數(shù)組:mounted() {fetch("https://www.googleapis.com/books/v1/volumes?q=%22coding%22", {  method: "get",})  .then((res) => {    return res.json();  })  .then((result) => {    let title;    let description;    let authors;    let id;    for (var i = 0; i < result.items.length; i++) {      title = result.items[i].volumeInfo.title;      description = result.items[i].volumeInfo.description;      authors = result.items[i].volumeInfo.authors;      id = result.items[i].id;      this.bookData.push(              {        avalable: true,         title,        id        },        {        authors,        description,        id        }也許,問題出在我對對象的表述上。如果有一些簡單的方法可以在 vue.js 項(xiàng)目中實(shí)現(xiàn)該目標(biāo),請?zhí)峁椭?。謝謝。
查看完整描述

1 回答

?
LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

在創(chuàng)建 bookData 對象時(shí),有一個(gè)屬性來顯示按鈕 (showButton),并且單擊它會使它變?yōu)?false。參考下面的代碼。


工作示例在這里


this.bookData.push(      

{

   avalable: true, 

   title,

   id,

   description,

   showButton = true

}

并在基于此的模板中顯示書的按鈕或標(biāo)題。這里不需要使用 ref 元素。


<section  v-for="(bookTitle, index) in books"

   v-bind:key="index"

   >

   <button

      @click="bookTitle.showButton = !bookTitle.showButton"

      class="list-group-item"

      v-if="bookTitle.showButton"

      >{{bookTitle.title}}

   </button>

   

  <!-- Have the logic for title here -->

  <h2 v-if="!bookTitle.showButton">{{bookTitle.description}}</h2>

</section>


查看完整回答
反對 回復(fù) 2022-12-18
  • 1 回答
  • 0 關(guān)注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號