亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>I need to call a method of a child component from the parent component. However, something I'm doing in the child component seems to be causing an infinite loop. I've tried looking at other questions and while they seem to be solving a similar problem, I can't apply their exact pattern to the problem I'm facing, it seems to be different. I'm just not sure what I'm looking at. </p> <p>I have two components, one is called ToggleButtons and the other is simplified to a button. Here are the ToggleButtons:</p> <pre class="brush:php;toolbar:false;"><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> </template> <script> export default { props: { leftSelectedInitially: { type: Boolean, default: true, } }, data() { return { leftSelected: true, rightSelected: false, } }, beforeMount() { this.leftSelected = this.leftSelectedInitially; this.rightSelected = !this.leftSelectedInitially; }, methods: { toggle(override) { this.leftSelected = override == 'left'; this.rightSelected = override == 'right'; } } } </script></pre> <p>這是它與按鈕的實(shí)現(xiàn)：</p> <pre class="brush:php;toolbar:false;"><ToggleButtons 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> </ToggleButtons></pre> <p>其中toggle方法為：</p> <pre class="brush:php;toolbar:false;">toggle(direction) { this.$refs.tb.toggle(direction); },</pre> <p>正如你可能已經(jīng)從代碼中看到的殘留物，我之前嘗試過(guò)各種模式，包括通過(guò)v-slot傳遞toggle方法。所有這些都導(dǎo)致了相同的“你創(chuàng)建了一個(gè)無(wú)限循環(huán)”的消息。</p> <p>我想知道是否因?yàn)樵摲椒ㄔ趪L試渲染時(shí)調(diào)用了toggle。我不確定這是否會(huì)導(dǎo)致無(wú)限循環(huán)。我在這里的主要問(wèn)題是我不明白這個(gè)循環(huán)是從哪里來(lái)的。我目前的主要目標(biāo)是理解出了什么問(wèn)題，這樣如果再次發(fā)生，我就能看到它，即使修復(fù)方法只是找到一個(gè)更簡(jiǎn)單的方法。</p>

:toggleLeft="toggle('left')"
:toggleRight="toggle('right')

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>