在我们的应用程序中，我们有选择选项。例如，在我的选择选项中，我有 4 个值:A、B、C 和 D。 当我选择选项C时，它将添加另一个输入文本。
Vue
<div class="form-group">
<label>Asset Depreciation Method<span class="required-field">*</span></label>
<select class="form-control" name="asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
<div class="form-group periods">
</div>
脚本
data: () => ({
modal_title: 'Add Asset',
asset_code: '',
coa_checker_result: '',
asset_depreciation: '',
}),
ready()
{
this.checkAssetCode();
this.assetDepreciation();
this.createData()
},
components: {
},
//controller
methods: {
checkAssetCode(e) {
e.preventDefault();
var code = this.asset_code;
const asset = this.$refs.assetCode
const table = asset.dataset.table
axios.post("/checkIfCodeExists", {code:code,table:table})
.then((response) => {
var code_checker = '';
if (response.data == 0) {
$('.add-asset').removeAttr('disabled','disabled');
// code_checker = 'wala pang ganitong code';
}else{
$('.add-asset').attr('disabled','disabled');
code_checker = 'Code is already exist';
}
this.coa_checker_result = code_checker;
});
},
assetDepreciation(e){
e.preventDefault();
var value = this.asset_depreciation;
/* UNIT OF PRODUCTION*/
if(value == 2)
{
alert(value);
$('.periods').append(''+
'<input type="text" class="form-control" name="period" required="required>"'
);
}
},
当我选择 C 时，将显示警报，但它没有附加在我的类时间中。
问题:如何根据所选选项附加我的输入字段？
最佳答案
首先在 Vue 中使用 jQuery 会让人皱眉，你正在使用带有 dom 渲染库的 dom 操作库，你可以更简单地做到这一点。
通过使用 v-if 您可以设置元素以显示变量是否存在，您也可以通过:disabled="variable"使用禁用属性来执行此操作
<template>
<section>
<div class="form-group">
<label>Asset Depreciation Method<span class="required-field">*</span></label>
<select class="form-control" name="asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
<div class="form-group periods">
<input v-if="show_input" type="text" class="form-control" name="period" required="required">
</div>
</section>
</template>
<script>
export default {
data: () => ({
modal_title: 'Add Asset',
asset_code: '',
coa_checker_result: '',
asset_depreciation: '',
show_input: false,
}),
ready()
{
this.checkAssetCode();
this.assetDepreciation();
this.createData()
},
components: {
},
//controller
methods: {
checkAssetCode(e) {
e.preventDefault();
var code = this.asset_code;
const asset = this.$refs.assetCode
const table = asset.dataset.table
axios.post("/checkIfCodeExists", {code:code,table:table})
.then((response) => {
var code_checker = '';
if (response.data == 0) {
$('.add-asset').removeAttr('disabled','disabled');
// code_checker = 'wala pang ganitong code';
}else{
$('.add-asset').attr('disabled','disabled');
code_checker = 'Code is already exist';
}
this.coa_checker_result = code_checker;
});
},
assetDepreciation(e){
e.preventDefault();
var value = this.asset_depreciation;
/* UNIT OF PRODUCTION*/
if(value == 2)
{
alert(value);
this.show_input = true;
}
},
}
}
由于您使用 v-model 进行了选择绑定(bind)，因此您也不需要 assetDepreciation 方法，因此您可以执行 <input v-if="asset_depreciation == 2" type="text" class="form-control" name="period" required="required">
以下是我要做的。
<template>
<section>
<div class="form-group">
<label for="asset_depreciation">
Asset Depreciation Method<span class="required-field">*</span>
</label>
<select
id="asset_depreciation"
class="form-control"
name="asset_depreciation"
required="required"
v-model="asset_depreciation"
>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
</select>
</div>
<button :disabled="button_disabled" @click="someMethod">Add Asset</button>
<div class="form-group periods">
<input
v-if="asset_depreciation == 2"
type="text"
class="form-control"
name="period"
required="required"
/>
</div>
</section>
</template>
<script>
export default {
data() {
return {
modal_title: "Add Asset",
asset_code: "",
button_disabled: true,
coa_checker_result: "",
asset_depreciation: ""
};
},
mounted() {
this.checkAssetCode();
this.createData();
},
methods: {
someMethod() {
// yada yada
},
checkAssetCode(e) {
e.preventDefault();
var code = this.asset_code;
const asset = this.$refs.assetCode;
const table = asset.dataset.table;
axios
.post("/checkIfCodeExists", { code: code, table: table })
.then(response => {
this.button_disabled = response.data != 0;
});
},
}
};
关于javascript - 拉拉维尔 5 : Append input text depends on the selected option vue js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59097412/