首页 > 解决方案 > v-show 基于选择选项数据属性值

问题描述

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

现在,我们需要根据数据属性 - 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>

标签: javascripthtmlvue.js

解决方案


您的标记:

<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;
    }  
  }
},

推荐阅读