我需要一些關于 Vue 連接的幫助。我有一個輸入欄位，我在其中輸入一些用戶名，我想將它與我的資料中的 URL 連接起來。這是我的代碼
<input type="text" name="text" placeholder="Username" id='username' v-model="usersrc">
<div v-for="item in storedData" :key="item.id">
<a :href="item.link" target="_blank">
<p>{{item.name}}</p>
<p :id="item.id 'availability'"></p>
</a>
</div>
export default {
components: {
AppLayout,
},
data() {
return {
usersrc: this.usersrc,
items: [
{id:1, name: "Facebook" ,link:"https://facebook.com/${{usersrc}}"}, and so on
我的目的是在 div 元素的標簽中使用用戶名獲取整個 URL。當我單擊它時，例如，如果我輸入測驗，以獲取 https://facebook.com/test URL。我也試過這樣
link:"https://facebook.com/ 'usersrc'"
link:"https://facebook.com/{{usersrc}}"
但沒有任何效果。我是 Vue 的新手，所以我將不勝感激任何幫助！
uj5u.com熱心網友回復：
您可以使用Template literals在模板中直接實作此目的。
另外，我剛剛添加了一個檢查，如果輸入框中沒有值，則不應顯示鏈接。您可以根據您的要求洗掉此檢查。
演示：
new Vue({
el: '#app',
data: {
usersrc: null,
items: [
{ id: 1, name: 'Facebook', link: 'https://facebook.com/' },
{ id: 2, name: 'Instagram', link: 'https://instagram.com/' }
]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" name="text" placeholder="Username" id='username' v-model="usersrc">
<div v-if="usersrc">
<div v-for="item in items" :key="item.id">
<a :href="`${item.link}${usersrc}`" target="_blank">
<p>{{item.name}}</p>
<p :id="item.id 'availability'"></p>
</a>
</div>
</div>
</div>uj5u.com熱心網友回復：
嘗試
link:"'https://facebook.com/' usersrc"
或者使用 alt 96 更好
link:"`https://facebook.com/` usersrc"
uj5u.com熱心網友回復：
data() 函式在組件渲染時只執行一次。所以我們需要在發生變化時手動更新該資料。并在反引號中使用單個花括號。
watch:{
usersrc(newVal){
this.items = this.items.map(item=> {
return {...item,link:`https://facebook.com/${usersrc}`})
}
}
}
uj5u.com熱心網友回復：
這應該可行，也許問題出在其他地方？我剛剛注意到您在 data 中寫道：
usersrc: this.usersrc
我建議使用像空陣列這樣的默認值，因為可以通過腳本中的“this”訪問資料中的內容，所以這將是多余的。
如果您將此行替換為 ，它是否有效
usersrc: ''？
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493890.html