<模板 v 槽：左=”{ 已選定， }>> <按鈕 類別=“按鈕” :class="{ secondary: !isSelected }" :aria-pressed="isSelected" :togglable=“真” v-text="'左'" @click=“切換（'左'）” >> </範(fàn)本> <模板 v-slot:right="{ 已選定， }>> <按鈕 類別=“按鈕” :class="{ secondary: !isSelected }" :aria-pressed="isSelected" :togglable=“真” v-text="'右'"; @click=“切換（'右'）” >> </範(fàn)本> </切換按鈕></pre> <p>其中切換方法為：</p> <pre class="brush:php;toolbar:false;">切換（方向）{ this.$refs.tb.toggle(方向); },</pre> <p>正如你可能已經(jīng)從程式碼中看到的殘留物，我之前嘗試過各種模式，包括透過 v-slot 提交切換方法。所有這些都導(dǎo)致??了相同的「你創(chuàng)建了一個(gè)無限循環(huán)」的訊息。</p> <p>我想知道是否因?yàn)樵摲椒ㄔ趪L試渲染時(shí)調(diào)用了切換。我不確定這是否會導(dǎo)致無限循環(huán)。我在這裡的主要問題是我不明白這個(gè)循環(huán)是從哪裡來的。我目前的主要目標(biāo)是理解生長什麼問題，這樣如果再次發(fā)生，我就能看到它，即使修復(fù)方法只是找到一個(gè)更簡單的方法。</p>
1
0
0
以下對toggle函數(shù)的綁定對我來說沒有任何意義：
:toggleLeft="toggle('left')"
:toggleRight="toggle('right')
由於函數(shù)不會傳回任何值，所以這是錯(cuò)誤的。
這兩個(gè)綁定會導(dǎo)致函數(shù)無限呼叫toggle('left')和toggle('right')
只需在toggle函數(shù)中新增console.log(direction)以查看發(fā)生了什麼。
如果您想獲得關(guān)於正確解決方案的建議，請描述您想要實(shí)現(xiàn)的目標(biāo)。
Vue.component('toggle-buttons',{
props: {
leftSelectedInitially: {
type: Boolean,
default: true,
}
},
data() {
return {
leftSelected: true,
rightSelected: false,
}
},
beforeMount() {
//this.leftSelected = this.leftSelectedInitially;
//this.rightSelected = !this.leftSelectedInitially;
},
methods: {
toggle(override) {
console.log(`override: ${override}`)
this.leftSelected = override == 'left';
this.rightSelected = override == 'right';
}
},
template: `
<div role="list">
<div role="listitem">
<slot name="left" :is-selected="leftSelected" :toggleLeft="toggle('left')" />
</div>
<div role="listitem">
<slot name="right" :is-selected="rightSelected" :toggleRight="toggle('right')" />
</div>
</div>
`
});
new Vue({
el:'#app',
methods: {
toggle(direction) {
console.log(`direction: ${direction}`)
this.$refs.tb.toggle(direction);
}
}
})#app { line-height: 2; }
[v-cloak] { display: none; }<div id="app">
<toggle-buttons ref="tb">
<template v-slot:left="{ isSelected }">
<button
class="button"
:class="{ secondary: !isSelected }"
:aria-pressed="isSelected"
:togglable="true"
v-text="'left'"
@click="toggle('left')"
/>
</template>
<template v-slot:right="{ isSelected }">
<button
class="button"
:class="{ secondary: !isSelected }"
:aria-pressed="isSelected"
:togglable="true"
v-text="'right'"
@click="toggle('right')"
/>
</template>
</toggle-buttons>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
