v-show 基于 select 选项数据属性值

Question

如果值 =“two”，则使用 HTML 和 VueJS 显示 div。 它工作正常。

现在，我们需要根据数据属性 - data-is-valid 显示 div 元素。 如果 data-is-valid=true，则显示 div 元素。

据我所知，尝试过不同的方法。 我只能使用 select 选项来获得此功能。 不带数据属性。

 const app = new Vue({ el: '#test', data: { selectedOption: '' }, methods: { }, });

 <div id="test"> <div class="form-group"> <label for="topic">Topic</label> <div class="custom-chosen-wrapper":class="{'text-error': errors.has('nyp-contact-topic')}"> <select class="select-topic" v-validate="'required'" v-model="selectedOption" v-on:change="onChangeSelectedTopic"> <option value="">Select</option> <option value="One" data-is-valid="false">One</option> <option value="Two" data-is-valid="true">Two</option> </select> </div> </div> <div class="form-group" v-show="selectedOption == 'true'" v-cloak="v-cloak"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <div class="custom-chosen-wrapper"> <select class="chosen-select select-picker select-picker-link" name="personal-salutation" v-validate="selectedOption === 'true'? 'required': ''" tabindex="-98"> <option value="" disabled="disabled" selected="selected">Select salutation</option> <option value="Mr">Mr</option> <option value="Mrs">Mrs</option> <option value="Doctor">Doctor</option> <option value="Madam">Madam</option> </select> </div> </div> </div>

Answer 1

您的标记：

<template lang="pug">
  div
    select(v-model="selectedOption" v-on:change="onChangeSelectedTopic")
      option(value="") Select
      option(value="One" data-is-valid="false") One
      option(value="Two" data-is-valid="true") Two
    div(v-show="selectDataValidate")
      // show or hide content
<template>

在你的data中声明这个：

data: {
  selectedOption: '',
  selectDataValidate: false
}

正如您在我们的 Skype 通话中提到的，您正在使用jQuery所以这里是解决方案：

methods: {
  onChangeSelectedTopic: (e) => {
    if($(e).find(':selected').attr('data-is-valid') == 'true'){
      instance.selectDataValidate = true;
    }  else {
      instance.selectDataValidate = false;
    }  
  }
},