如何使用Vue和数组创建条件。

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

How to use Vue and Array to make a conditions

问题

  1. <span v-if="'{{ variant_selection.option1 }} / {{ value }}' !== '{{ variant_selection.option1 }} / XS' ">.</span>
英文:

I have values XS S M loaded as HTML for all sizes Black White and I have a JSON show available sizes of each color.

I want to add v-if when the XS is not available in the array variant_selection.size by using variant_selection.option1 and the values that loaded as HTML XS S M.

Example:

  1. variant_selection: {
  2. option1: "Black",
  3. option2: "XS",
  4. size: [
  5. "Black / XS", /// Only black color has XS size
  6. "Black / S",
  7. "Black / M",
  8. "White / S",
  9. "White / M",
  10. ],
  11. },

I was trying that but didn't work for me, please help

  1. <span v-if="'variant_selection.option1 / {{ value }}' !== 'variant_selection.size.includes(variant_selection.option1) / {{ value }}' ">.</span>

答案1

得分: 2

  1. <span v-if="selection.size.includes(`${color} / ${size}` )">
英文:
  1. <span v-if="variant_selection.size.includes(variant_selection.option1 + ' / ' + value)" ..

or

  1. <span v-if="variant_selection.size.includes(`${variant_selection.option1} / ${value}`)" ..

You should not use Mustaches {{}} in the Vue v-if conditions

See, Attribute Bindings

> Mustaches cannot be used inside HTML attributes. Instead, use a
> v-bind directive

Solution

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const { createApp,ref } = Vue
  2. const App = {
  3. setup() {
  4. const color = ref(&#39;&#39;)
  5. const colors = [&#39;Black&#39;,&#39;White&#39;]
  6. const size = ref(&#39;&#39;)
  7. const sizes = [&#39;XS&#39;,&#39;S&#39;, &#39;M&#39;]
  8. const selection = {
  9. size: [
  10. &quot;Black / XS&quot;, /// Only black color has XS size
  11. &quot;Black / S&quot;,
  12. &quot;Black / M&quot;,
  13. &quot;White / S&quot;,
  14. &quot;White / M&quot;,
  15. ]
  16. }
  17. return {
  18. color, colors, size, sizes, selection
  19. }
  20. }
  21. }
  22. const app = createApp(App)
  23. app.mount(&#39;#app&#39;)

<!-- language: lang-css -->

  1. #app { line-height: 1.75; }
  2. [v-cloak] { display: none; }

<!-- language: lang-html -->

  1. &lt;div id=&quot;app&quot; v-cloak&gt;
  2. Color: &lt;select v-model=&quot;color&quot;&gt;
  3. &lt;option v-for=&quot;c in colors&quot;&gt;{{c}}&lt;/option&gt;
  4. &lt;/select&gt;&lt;br/&gt;
  5. Size: &lt;select v-model=&quot;size&quot;&gt;
  6. &lt;option v-for=&quot;s in sizes&quot;&gt;{{s}}&lt;/option&gt;
  7. &lt;/select&gt;&lt;br/&gt;
  8. Combination: {{ `${color} / ${size}` }}&lt;br/&gt;
  9. &lt;span v-if=&quot;selection.size.includes(`${color} / ${size}` )&quot;&gt;Combination is present&lt;/span&gt;
  10. &lt;/div&gt;
  11. &lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.prod.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月8日 17:17:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75671237.html
匿名

发表评论

匿名网友

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

确定