Условно спрятать абзац в Vuejs?

Question

У меня есть проблема, которую я пытаюсь понять. У меня есть выпадающий список, и абзац должен отображаться только для первого и второго варианта. Теперь это легко сделать с помощью кнопки или флажка. Как мне сделать это через выпадающий список.

Я создал кодекс для демонстрационных целей. https://codepen.io/anon/pen/LKYZox. Я знаю, что абзац должен быть привязан к значениям, но ему сложно выполнить.

 <div id="app">
 <v-app id="inspire">
   <v-layout row wrap>
  <v-flex xs3>
        <v-select :items="items">
   </v-select>
    </v-flex> 
   <span class="title text-xs-center">How to Show This paragraph for First 
and Second Item only</span>
  </v-layout>  
  </v-app>
 </div>


  new Vue({
 el: '#app',
 data(){
   return{
    items: [
    'Item1',
    "Item2",
    "Item3",
      "Item4"
    ]
  }
 }
})

Заранее спасибо.

Answer 1

Таким образом, вам нужно привязать выбранное значение v-select к некоторым данным. В приведенном ниже примере я использовал v-model, и данные называются item.

<div id="app">
  <v-app id="inspire">
    <v-layout row wrap>
      <v-flex xs3>
         <!-- Added a v-model here -->
         <v-select :items="items" v-model="item"></v-select>
      </v-flex> 
      <!-- Added a v-if here -->
      <span
        v-if="['Item1', 'Item2'].includes(item)"
        class="title text-xs-center"
      >
        How to Show This paragraph for First and Second Item only
      </span>
    </v-layout>  
  </v-app>
</div>

new Vue({
  el: '#app',
  data(){
    return{
      item: 'Item2', // <- This is new
      items: [
        'Item1',
        "Item2",
        "Item3",
        "Item4"
      ]
    }
  }
})

Вам необязательно устанавливать начальное значение item равным 'Item2', но эта строка должна быть там для создания свойства реактивных данных. Вы можете использовать null, если не хотите, чтобы какой-либо элемент был выбран изначально.

Как именно вы напишите v-if, будет зависеть от особенностей вашего сценария. Например, если вы хотите проверить первые два элемента по индексу, это может быть v-if="[0, 1].includes(items.indexOf(item))". Если -1 не проблема, то это можно упростить до v-if="items.indexOf(item) < 2". Если реальный сценарий немного сложнее, вы можете вместо этого переместить выражение v-if в вычисляемое свойство.