v-show 基于选择选项数据属性值答案

【问题标题】：v-show based on select option data attribute valuev-show 基于选择选项数据属性值
【发布时间】：2020-10-28 11:11:03
【问题描述】：

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

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

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

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>

【问题讨论】：

请发布您尝试过的内容。您在何处附加了 data 属性以及您尝试访问数据的方式。
让我们弄清楚，在Skype上ping我：syed_haroon
感谢您宝贵的 cmets 和会议@Syed
您还在寻找答案还是解决了？

标签： javascript html vue.js

【解决方案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;
    }  
  }
},

【讨论】：