There is a form where users can input numbers and select the unit of measurement. I need to prevent users from selecting a unit if no number has been entered, and clear the unit value if the number is erased after a unit has been selected.
<div>
<input-number v-model="number" />
<select v-model="unit" :disabled="!form.model.number">
<select-option v-for="item in currency_unit">
{{ item.name }}
</select-option>
</select>
</div>
Don't forget to include a :key directive whenever iterating through items.
<template>
<div>
<input number v-model="number" />
<select v-model="unit" :disabled="!number">
<option v-for="item in currency_unit" :key="item.id">
{{ item.name }}
</option>
</select>
</div>
</template>
If you need to reset the unit value, consider using a watcher
<script>
export default {
name: 'Component',
data() {
return {
number: '',
unit: null,
currency_unit: [
{ name: 'foo', id: 1 },
{ name: 'bar', id: 2 },
],
};
},
watch: {
number(newValue) {
if (!newValue) {
this.unit = null;
}
},
},
};
</script>
Adjust the disable condition to number === '' and initialize the value of number as ''
var app = new Vue({
el: '#app',
data() {
return {
number: '',
unit: null,
currency_unit: [
{ id: 'rupee', name: 'Rupees'},
{ id: 'dollar', name: 'Dollars'},
{ id: 'euro', name: 'Euros'}
]
};
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input number v-model="number" />
<select v-model="unit" :disabled="number===''">
<option v-for="item in currency_unit" :key="item.id">
{{ item.name }}
</option>
</select>
</div>If you want to accomplish this task, you can set up a watcher on the number model value. This way, if the value becomes empty, you have the option to assign either an empty value or null to the unit.
Feel free to check out the Live Demo below:
new Vue({
el: '#app',
data: {
number: null,
unit: null,
currency_unit: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}]
},
watch: {
number(val) {
if (!val) {
this.unit = null;
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<input type="number" v-model="number" />
<select v-model="unit" :disabled="!number">
<option v-for="(item, index) in currency_unit" :key="index">
{{ item.name }}
</option>
</select>
</div>I'm currently exploring the implementation of two-way data binding between parent and child components. In this case, my child component, phoneInput, accepts a phone number, formats it, and then passes it to the parent using two-way data binding. Over ...
My goal is to showcase multiple elements in cards, obtained from my routing system, much like how I'm setting up my sidebar (which is functioning correctly). I have all the titles and icons ready, and the linking works seamlessly. This is where I&apo ...
I am encountering an issue with my Vue app that uses Vuex. When I have multiple tabs open, any changes made to the store in one tab do not reflect in the other. Is there a way to ensure that the store/data is synchronized instantly across all tabs? const ...
I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...
Issue with the Computed name Property in a Component <template> <div class="person"> <p>{{name}}</p> </div> </template> <script> export default { name: 'person', data () { return ...
Is there a way to dynamically populate a second select tag based on the selected option from the first select tag in VueJS? I am facing an issue where the variable declared in the component does not update even though the API response is correct when a cho ...
Extract the value of GOOGLE_MAP_API variable from the .env file and pass it to gmap-vue.js located in the boot/ directory It works fine when I directly use the key like this load: { key: 'AIzaSyCw9Txxxxxxxxxxxxx', ... } However, I w ...
Upon hovering over a dot, only a blue line is displayed without showing a tooltip as expected below: Library Version: "chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7" Actual : enter image descriptio ...
I've recently started delving into web app development and I'm encountering some basic questions regarding jQuery and Vue that I can't seem to find answers to. I have an application built using the Quasar Framework which frequently involves ...
Currently, I have a multi-select dropdown feature where users can list and select multiple items at once. Here is the code snippet I am utilizing for this functionality: <Multiselect v-model="abc" valueProp="x ...
I am utilizing Video Text Tracks to showcase advanced live information on top of the video. A new video is loaded every few minutes, each with its own .webvtt file (consisting of 2-3k lines). Although everything is functioning properly, there is a persis ...
I have created a popup form with modularity using Vuetify. However, I encountered an issue where clicking on the email input field, deselecting it to trigger an "empty" error, and then switching over to the register tab caused a similar error for the name ...
I have implemented a Highcharts solid gauge in my project, and you can view a sample image https://i.stack.imgur.com/QQQFn.png However, I am facing an issue where unwanted grey bullets are appearing in the test environment but not locally. I have checked ...
I am currently working on setting up e2e tests using Cypress and Cucumber for my project. The application is built with Vue CLI 4.1.1, and I have added the package cypress-cucumber-preprocessor (V1.19.0) via NPM. Update: After extensive research and tes ...
I have created several dropdown select fields using the following code: <tr v-for="(data,index) in dataList" :key="data.headers"> <td>{{ data.headers }}</td> <td>{{ data.sample }}</td> <td> ...
Currently, I am in the process of developing my app and have opted to utilize the new built-in store system instead of relying on Vuex. I have a variable that undergoes frequent changes and previously used the following code when working with Vuex: store.w ...
My store and state is updating correctly. I'm currently using Ionic along with vue.js composition using Pinia. After making a selection on a previous route to choose a new image, the image gets updated properly in pinia, but it does not reactively ch ...
I'm facing a few challenges as I dive into learning Vue.js for just one week. Keep in mind that this example is actually nested within a parent component called <question>, but for the sake of simplicity, I've streamlined the code for this ...
Witness the mysterious behavior through my fiddles: Anticipated outcome: https://jsfiddle.net/o7c9mwzf/27/ By clicking "unshift," I add an element to the beginning of my items array. After setting its data, clicking "unshift" again should maintain the el ...
Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...