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

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

使用 Vue 使用下拉菜單更改 <img> src

使用 Vue 使用下拉菜單更改 <img> src

臨摹微笑 2023-10-14 18:40:57
我是 Vue 新手,我正在使用這個下拉菜單組件(https://ej2.syncfusion.com/vue/documentation/drop-down-list/data-binding/)從 json 數組中提取列表項看起來像這樣:<template>    <div id="app">    <div id='container'>        <ejs-dropdownlist id='dropdownlist' placeholder='Pick a name' :dataSource='images' :fields='fields'></ejs-dropdownlist>    </div>    <img v-for="image in images" :key="image.url" :src="require('@/assets/pics/' + image.url)">  </div></template><script>    export default {        data() {            return {                images: [                    {                        id: 'm1',                        name: 'Sample Name',                        url: "../assets/pics/samplename.png"                    },...                    ],                    fields : {text:'name', value:'id'}            }        }    }</script>目前所做的只是通過循環一次列出所有圖像v-for,但我想從下拉菜單中選定的名稱中獲取 id/url 并將其傳遞給標簽,<img>以便在下面僅顯示相應的圖像,我該怎么做呢?謝謝!
查看完整描述

1 回答

?
森林海

TA貢獻2011條經驗 獲得超2個贊

您的下拉列表需要v-model="selected"綁定才能將所選圖像傳達給父級:


<ejs-dropdownlist v-model="selected"></ejs-dropdownlist> 

data() {

  return {

    selected: null, // Used by the dropdown

    images: [...]

  }

}

Av-for會導致模板循環遍歷所有圖像,因此您不希望出現這種情況。刪除它并使用selected正確的 src 的圖像:


<img v-if="selected" :src="require('@/assets/pics/' + selected.url)">

另一個問題是您的圖像對象應該只有圖像的名稱,因為路徑assets被硬編碼到src綁定中:


{

   ...

   url: "samplename.png"

}


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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