当我设置一个v-for时，props未定义。

huangapple
go评论107阅读模式
英文:

When i set a v-for, props undefined

问题

I'm doing a website of a League of Legends assist, and i have a component with five elements (one for each line). I had it setted without a v-for, and it worked perfect, but when i configured it with a v-for for future eficiency, it gives me a error of not getting the prop passed by the father.

If i remove the v-for it works perfectly.

Here is the code without the v-for:

  1. <template>
  2.     <div class="champsIconsSelection">
  3.       <button class="champIconSelection" :class="{[lado]: true, picked: (this.rolePicked==='TOP'), setted: (this.champsPicked[0] !== 0)}" @click="pickRole('TOP')">
  4.         <img :src="'/static/icons/'+ this.champsPicked[0] +'.jpg'" v-if="this.champsPicked[0] !== 0">
  5.       </button>
  6.       <button class="champIconSelection" :class="{[lado]: true, picked: (this.rolePicked==='JGL'), setted: (this.champsPicked[1] !== 0)}" @click="pickRole('JGL')">
  7.         <img :src="'/static/icons/'+ this.champsPicked[1] +'.jpg'" v-if="this.champsPicked[1] !== 0">
  8.       </button>
  9.       <button class="champIconSelection" :class="{[lado]: true, picked: (this.rolePicked==='MID'), setted: (this.champsPicked[2] !== 0)}" @click="pickRole('MID')">
  10.         <img :src="'/static/icons/'+ this.champsPicked[2] +'.jpg'" v-if="this.champsPicked[2] !== 0">
  11.       </button>
  12.       <button class="champIconSelection" :class="{[lado]: true, picked: (this.rolePicked==='ADC'), setted: (this.champsPicked[3] !== 0)}" @click="pickRole('ADC')">
  13.         <img :src="'/static/icons/'+ this.champsPicked[3] +'.jpg'" v-if="this.champsPicked[3] !== 0">
  14.       </button>
  15.       <button class="champIconSelection" :class="{[lado]: true, picked: (this.rolePicked==='SUP'), setted: (this.champsPicked[4] !== 0)}" @click="pickRole('SUP')">
  16.         <img :src="'/static/icons/'+ this.champsPicked[4] +'.jpg'" v-if="this.champsPicked[4] !== 0">
  17.       </button>
  18.     </div>
  19. </template>

And here is with the v-for:

  1. <template>
  2.     <div class="champsIconsSelection">
  3.       <div v-for="position in positions" v-bind:key="position.pos">
  4.         <button class="champIconSelection"
  5.                 :class="{[lado]: true, picked: (this.rolePicked && this.rolePicked===position.role), setted: (this.champsPicked[position.pos] !== 0)}"
  6.                 @click="pickRole(position.role)">
  7.           <img :src="'/static/icons/'+ this.champsPicked[position.pos] +'.jpg'" v-if="this.champsPicked[position.pos] !== 0">
  8.         </button>
  9.       </div>
  10.     </div>
  11. </template>

The rest of the component, in case it's useful:

  1. <script>
  2. export default {
  3.   name: 'champ_selector',
  4.   props: ['lado', 'rolePicked', 'champsPicked'],
  5.   data () {
  6.     return {
  7.       positions: [
  8.         {
  9.           'pos': 0,
  10.           'role': 'TOP'
  11.         },
  12.         {
  13.           'pos': 1,
  14.           'role': 'JGL'
  15.         },
  16.         {
  17.           'pos': 2,
  18.           'role': 'MID'
  19.         },
  20.         {
  21.           'pos': 3,
  22.           'role': 'ADC'
  23.         },
  24.         {
  25.           'pos': 4,
  26.           'role': 'SUP'
  27.         }
  28.       ]
  29.     }
  30.   },
  31.   methods: {
  32.     pickRole (role) {
  33.       this.$emit('pickRole', role)
  34.     }
  35.   }
  36. }
  37. </script>

This is the parent component:

  1. <template>
  2.   <main>
  3.     <div id="champZone">
  4.       <div id="blueChampSelect">
  5.         <champSelect :lado="'blue'" :rolePicked="b_rolePicked" :champsPicked="b_champsPicked" @pickRole="pickRoleB"></champSelect>
  6.       </div>
  7.       <div id="champList">
  8.         <champList @setChamp="setChamp"></champList>
  9.       </div>
  10.       <div id="redChampSelect">
  11.         <champSelect :lado="'red'" :rolePicked="r_rolePicked" :champsPicked="r_champsPicked" @pickRole="pickRoleR"></champSelect>
  12.       </div>
  13.     </div>
  15.     <dataZone></dataZone>
  16.   </main>
  17. </template>
  19. <script>
  20. import champList from './ChampList.vue'
  21. import champSelect from './ChampSelect.vue'
  22. import dataZone from './DataZone.vue'
  24. export default {
  25.   data () {
  26.     return {
  27.       b_rolePicked: '',
  28.       r_rolePicked: '',
  29.       b_champsPicked: [0, 0, 0, 0, 0],
  30.       r_champsPicked: [0, 0, 0, 0, 0],
  31.       roleDict: {'TOP': 0, 'JGL': 1, 'MID': 2, 'ADC': 3, 'SUP': 4}
  32.     }
  33.   },
  34.   components: {
  35.     champList,
  36.     champSelect,
  37.     dataZone
  38.   }
  39. }
  40. </script>

I tried setting something in the variable passed throught the 'rolePicked' prop, but it didn't work either. It feels weird.

英文:

I'm doing a website of a League of Legends assist, and i have a component with five elements (one for each line). I had it setted without a v-for, and it worked perfect, but when i configured it with a v-for for future eficiency, it gives me a error of not getting the prop passed by the father.

If i remove the v-for it works perfectly.

Here is the code without the v-for:

  1. &lt;template&gt;
  2.     &lt;div class=&quot;champsIconsSelection&quot;&gt;
  3.       &lt;button class=&quot;champIconSelection&quot; :class=&quot;{[lado]: true, picked: (this.rolePicked===&#39;TOP&#39;), setted: (this.champsPicked[0] !== 0)}&quot; @click=&quot;pickRole(&#39;TOP&#39;)&quot;&gt;
  4.         &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[0] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[0] !== 0&quot;&gt;
  5.       &lt;/button&gt;
  6.       &lt;button class=&quot;champIconSelection&quot; :class=&quot;{[lado]: true, picked: (this.rolePicked===&#39;JGL&#39;), setted: (this.champsPicked[1] !== 0)}&quot; @click=&quot;pickRole(&#39;JGL&#39;)&quot;&gt;
  7.         &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[1] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[1] !== 0&quot;&gt;
  8.       &lt;/button&gt;
  9.       &lt;button class=&quot;champIconSelection&quot; :class=&quot;{[lado]: true, picked: (this.rolePicked===&#39;MID&#39;), setted: (this.champsPicked[2] !== 0)}&quot; @click=&quot;pickRole(&#39;MID&#39;)&quot;&gt;
  10.         &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[2] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[2] !== 0&quot;&gt;
  11.       &lt;/button&gt;
  12.       &lt;button class=&quot;champIconSelection&quot; :class=&quot;{[lado]: true, picked: (this.rolePicked===&#39;ADC&#39;), setted: (this.champsPicked[3] !== 0)}&quot; @click=&quot;pickRole(&#39;ADC&#39;)&quot;&gt;
  13.         &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[3] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[3] !== 0&quot;&gt;
  14.       &lt;/button&gt;
  15.       &lt;button class=&quot;champIconSelection&quot; :class=&quot;{[lado]: true, picked: (this.rolePicked===&#39;SUP&#39;), setted: (this.champsPicked[4] !== 0)}&quot; @click=&quot;pickRole(&#39;SUP&#39;)&quot;&gt;
  16.         &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[4] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[4] !== 0&quot;&gt;
  17.       &lt;/button&gt;
  18.     &lt;/div&gt;
  19. &lt;/template&gt;

And here is with the v-for:

  1. &lt;template&gt;
  2.     &lt;div class=&quot;champsIconsSelection&quot;&gt;
  3.       &lt;div v-for=&quot;position in positions&quot; v-bind:key=&quot;position.pos&quot;&gt;
  4.         &lt;button class=&quot;champIconSelection&quot;
  5.                 :class=&quot;{[lado]: true, picked: (this.rolePicked &amp;&amp; this.rolePicked===position.role), setted: (this.champsPicked[position.pos] !== 0)}&quot;
  6.                 @click=&quot;pickRole(position.role)&quot;&gt;
  7.           &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[position.pos] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[position.pos] !== 0&quot;&gt;
  8.         &lt;/button&gt;
  9.       &lt;/div&gt;
  10.     &lt;/div&gt;
  11. &lt;/template&gt;

The rest of the component, in case it's useful:

  1. &lt;script&gt;
  2. export default {
  3.   name: &#39;champ_selector&#39;,
  4.   props: [&#39;lado&#39;, &#39;rolePicked&#39;, &#39;champsPicked&#39;],
  5.   data () {
  6.     return {
  7.       positions: [
  8.         {
  9.           &#39;pos&#39;: 0,
  10.           &#39;role&#39;: &#39;TOP&#39;
  11.         },
  12.         {
  13.           &#39;pos&#39;: 1,
  14.           &#39;role&#39;: &#39;JGL&#39;
  15.         },
  16.         {
  17.           &#39;pos&#39;: 2,
  18.           &#39;role&#39;: &#39;MID&#39;
  19.         },
  20.         {
  21.           &#39;pos&#39;: 3,
  22.           &#39;role&#39;: &#39;ADC&#39;
  23.         },
  24.         {
  25.           &#39;pos&#39;: 4,
  26.           &#39;role&#39;: &#39;SUP&#39;
  27.         }
  28.       ]
  29.     }
  30.   },
  31.   methods: {
  32.     pickRole (role) {
  33.       this.$emit(&#39;pickRole&#39;, role)
  34.     }
  35.   }
  36. }
  37. &lt;/script&gt;

This is the parent component:

  1. &lt;template&gt;
  2.   &lt;main&gt;
  3.     &lt;div id=&quot;champZone&quot;&gt;
  4.       &lt;div id=&quot;blueChampSelect&quot;&gt;
  5.         &lt;champSelect :lado=&quot;&#39;blue&#39;&quot; :rolePicked=&quot;b_rolePicked&quot; :champsPicked=&quot;b_champsPicked&quot; @pickRole=&quot;pickRoleB&quot;&gt;&lt;/champSelect&gt;
  6.       &lt;/div&gt;
  7.       &lt;div id=&quot;champList&quot;&gt;
  8.         &lt;champList @setChamp=&quot;setChamp&quot;&gt;&lt;/champList&gt;
  9.       &lt;/div&gt;
  10.       &lt;div id=&quot;redChampSelect&quot;&gt;
  11.         &lt;champSelect :lado=&quot;&#39;red&#39;&quot; :rolePicked=&quot;r_rolePicked&quot; :champsPicked=&quot;r_champsPicked&quot; @pickRole=&quot;pickRoleR&quot;&gt;&lt;/champSelect&gt;
  12.       &lt;/div&gt;
  13.     &lt;/div&gt;
  15.     &lt;dataZone&gt;&lt;/dataZone&gt;
  16.   &lt;/main&gt;
  17. &lt;/template&gt;
  19. &lt;script&gt;
  20. import champList from &#39;./ChampList.vue&#39;
  21. import champSelect from &#39;./ChampSelect.vue&#39;
  22. import dataZone from &#39;./DataZone.vue&#39;
  24. export default {
  25.   data () {
  26.     return {
  27.       b_rolePicked: &#39;&#39;,
  28.       r_rolePicked: &#39;&#39;,
  29.       b_champsPicked: [0, 0, 0, 0, 0],
  30.       r_champsPicked: [0, 0, 0, 0, 0],
  31.       roleDict: {&#39;TOP&#39;: 0, &#39;JGL&#39;: 1, &#39;MID&#39;: 2, &#39;ADC&#39;: 3, &#39;SUP&#39;: 4}
  32.     }
  33.   },
  34.   components: {
  35.     champList,
  36.     champSelect,
  37.     dataZone
  38.   }
  39. }
  40. &lt;/script&gt;

I tried setting something in the variable passed throught the 'rolePicked' prop, but it didn't work either.
It feels weird.

答案1

得分: 1

You seem to be assuming the this context within the markup. Try changing this.

  1. <button class="champIconSelection"
  2.         :class="{[lado]: true, picked: (rolePicked && rolePicked===position.role), setted: (champsPicked[position.pos] !== 0)}"
  3.         @click="pickRole(position.role)">
  4.   <img :src="'/static/icons/' + champsPicked[position.pos] + '.jpg'" v-if="champsPicked[position.pos] !== 0">
  5. </button>

Notice that I removed the this. prefix you added to the props.

英文:

You seem to be assuming the this context within the markup. Try changing this.

  1. &lt;button class=&quot;champIconSelection&quot;
  2.                 :class=&quot;{[lado]: true, picked: (this.rolePicked &amp;&amp; this.rolePicked===position.role), setted: (this.champsPicked[position.pos] !== 0)}&quot;
  3.                 @click=&quot;pickRole(position.role)&quot;&gt;
  4.           &lt;img :src=&quot;&#39;/static/icons/&#39;+ this.champsPicked[position.pos] +&#39;.jpg&#39;&quot; v-if=&quot;this.champsPicked[position.pos] !== 0&quot;&gt;
  5.         &lt;/button&gt;

to this.

  1. &lt;button class=&quot;champIconSelection&quot;
  2.                 :class=&quot;{[lado]: true, picked: (rolePicked &amp;&amp; rolePicked===position.role), setted: (champsPicked[position.pos] !== 0)}&quot;
  3.                 @click=&quot;pickRole(position.role)&quot;&gt;
  4.           &lt;img :src=&quot;&#39;/static/icons/&#39;+ champsPicked[position.pos] +&#39;.jpg&#39;&quot; v-if=&quot;champsPicked[position.pos] !== 0&quot;&gt;
  5.         &lt;/button&gt;

Notice that I removed the this. prefix you added to the props.

huangapple
  • 本文由 发表于 2023年6月8日 17:47:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76430589.html
  • html
  • javascript
  • vue-component
  • vue.js
  • vuejs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定