javascript - 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>
解决方案
您的标记:
<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;
}
}
},
推荐阅读
- angular - Angular Reactive forms 选择默认对象
- oracle - 在for循环中调用存储过程
- php - 使用 jQuery 绑定将数据从一个输入复制到另一个
- powershell - 使用 PowerShell 向库中的 SharePoint 文件夹授予 Active-Directory-Synced 组权限
- java - 'appletviewer' 不是内部或外部命令、可运行程序或批处理文件
- azure-blob-storage - 如何将数据从 Azure IoT 中心路由到 Blob 和时序见解
- ionic-framework - 带有 Dialogflow v.2 的 Iionic 聊天客户端
- ffmpeg - 如何使用 ffmpeg 从 mp4 文件中删除“原始显示纵横比”?
- c# - 字典的 C# 问题
- swift - 如何在带有 AudioKit 4.6.1 的 AKMIDICallbackInstrument 回调中使用 AKMIDIStatus