link2055 link2056 link2057 link2058 link2059 link2060 link2061 link2062 link2063 link2064 link2065 link2066 link2067 link2068 link2069 link2070 link2071 link2072 link2073 link2074 link2075 link2076 link2077 link2078 link2079 link2080 link2081 link2082 link2083 link2084 link2085 link2086 link2087 link2088 link2089 link2090 link2091 link2092 link2093 link2094 link2095 link2096 link2097 link2098 link2099 link2100 link2101 link2102 link2103 link2104 link2105 link2106 link2107 link2108 link2109 link2110 link2111 link2112 link2113 link2114 link2115 link2116 link2117 link2118 link2119 link2120 link2121 link2122 link2123 link2124 link2125 link2126 link2127 link2128 link2129 link2130 link2131 link2132 link2133 link2134 link2135 link2136 link2137 link2138 link2139 link2140 link2141 link2142 link2143 link2144 link2145 link2146 link2147 link2148 link2149 link2150 link2151 link2152 link2153 link2154 link2155 link2156 link2157 link2158 link2159 link2160 link2161 link2162 link2163 link2164 link2165 link2166 link2167 link2168 link2169 link2170 link2171 link2172 link2173 link2174 link2175 link2176 link2177 link2178 link2179 link2180 link2181 link2182 link2183 link2184 link2185 link2186 link2187 link2188 link2189 link2190 link2191

[Vue.js] Why my array in vue does't affect page data is updated? Subscribe to RSS

when writing simple application in vue.js where when requesting server for data. Data are recieved and wrriten to two array of object but they are not updated to my html.

I had to change delimeters because i use django. I check the data (if its really there) and tried some dummy data to try if the vue.js app works and every thinks seems fine.

vue.js app:

var app1 = new Vue({
delimiters :[‘[[‘, ‘]]‘],
el: “#app-1”,
data:{
questions : [{text:”test”, ‘pk’:1}],
possible : [{text:”test”, ‘pk’:1}]
},
created:()=>{
let pk = $(“#pk”).val()
SetupCSRF();
$.ajax({
type:”post”,
url:”/tester/test/questions”,
data:JSON.stringify({pk:pk}),
contentType:”application/json”,
dataType:”json”,
success:(data)=>{
console.log(data);
this.questions = data.questions;
this.possible = data.possible;
}
});
}
});

part of html where i use vue:

<div id=”app-1”>
<div class=”testquestions”>
<div v-for=”question in questions”>
<div>[[question.text]]</div>
<button class=”remove” v-bind:value=”question.pk”>Remove</button>
</div>
</div>
<div>
<div class=”questions” v-for=”p in possible”>
<p>[[p.text]]</p>
<button class=”add” v-bind:value=”p.pk”>Add</button>
</div>
</div>
<button v-on:click=”test”>click</button>
</div>

Solution :

The problem is here:

created:()=>{

By using an arrow function you’re losing the this context. It won’t refer to the vue.js instance, instead you’ll be adding these properties to an unrelated object:

this.questions = data.questions;
this.possible = data.possible;

Try console logging this to see what I mean.

You should just need to change it to a normal function, like this:

created () {

Solution 2:

Loop through the data and push them into the array 1 by 1.

data.questions.forEach( q => this.questions.push(q) );

The array needs to be initialized beforehand, so you can’t just give it a new array.

[Vue.js] Errors when Pushing Vue.js app with IBM Cloud+Cloud Foundry Node Buildpack Subscribe to RSS

when really new (this is my first time) to using IBM Cloud.there is a Vue.js app that I would like to deploy on IBM Cloud with continuous delivery. there is my vue.js project in a GitHub repository, and I would like to be able to deploy the project automatically upon changes to the master branch of the repository. there is successfully set up the tool chain so that the “Delivery Pipeline” runs upon changes to the master branch. See screenshot:

Within the Delivery Pipeline, there is two stages: Build and Deploy. See screenshot 2:

I (think) there is successfully set up the Build Stage, where I install npm, then proceed to run the command “npm run build” to create a deployable bundle, with this script:

bash

#!/bin/bash

export NODE_VERSION=8
export NVM_VERSION=0.33.11

npm config delete prefix \
&& curl -o-
https://raw.githubusercontent.com/creationix/nvm/v${NVM\_VERSION}
/install.sh | bash \
&& export NVM_DIR=”$HOME/.nvm” \
&& . $NVM_DIR/nvm.sh \
&& nvm install $NODE_VERSION \
&& nvm alias default $NODE_VERSION \
&& nvm use default \
&& node -v \
&& npm -v

echo “Installing NPM”
npm install
echo “NPM install successful”
echo “Attempting npm run build”
npm run build
echo “NPM run build successful”

This is where the uncertainty arises. to deploy the project, which after npm run build should just require index.hmtl and build.js, which is in the ‘dist’ folder.

I don’t know if this is necessary, but following the npm install and npm run build stage, I added this stage, which I really don’t know what does. there is only added it because the boilerplate SDK for Node.js
had this stage prior to the deploy stage, see screenshot 3:

After this, there is the Deploy stage set to take the ‘Simple Build’ stage as its input. It deploys it with a simple cloud foundry push command. However, I get these errors in the log, after it downloads the various buildpacks:

Staging…
-—-> IBM SDK for Node.js Buildpack v3.25.1-20190115-1637
Based on Cloud Foundry Node.js Buildpack v1.5.24
-—-> Creating runtime environment

NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_ENV=production
NODE_MODULES_CACHE=true
-—-> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)

Resolving node version (latest stable) via ‘node-version-resolver’
Installing Node.js (6.16.0) from cache
Using default npm version: 3.10.10
-—-> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-—-> Building dependencies
Installing node modules (package.json)
-—-> Installing App Management
WARN: App Management cannot be installed because the start script cannot be found.
To install App Management utilities, specify the ‘node’ start script in ‘package.json’ or ‘Procfile’.
Checking for Dynatrace credentials
No Dynatrace Service Found (service with substring dynatrace not found in VCAP_SERVICES)
-—-> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-—-> Build succeeded!
vue@2.6.10

! This app may not specify any way to start a node process
http://docs.cloudfoundry.org/buildpacks/node
Exit status 0
Staging complete
Uploading droplet, build artifacts cache…
Uploading build artifacts cache…
Uploading droplet…
Uploaded build artifacts cache (15.3M)
Uploaded droplet (29.4M)
Uploading complete
Stopping instance 64ed3f5f-71eb-477b-afc1-0e07e2e74fdb
Destroying container
Successfully destroyed container

0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 crashed
FAILED
Error restarting application: Start unsuccessful

Any ideas? Where am I going wrong? Any help would be greatly appreciated!

Solution :

Got it working. I just needed to add the dependencies/require statements in the app.js file (some Express stuff), and then I removed that extra ‘Simple build” stage

[Vue.js] My Vue.js code is not working while loading Subscribe to RSS

{– @foreach($customers as $customer)–}
<tr id=”customerTable” role=”row” class=”odd” v-for=”customer in customers”>
<td class=”sorting_1”>@{ customer.company }{– $customer->company –}</td>
<td class=””>{– $customer->address –}</td>
<td>{– $customer->contact –}</td>
<td>{– $customer->contact_person –}</td>
<td>{– $customer->contact_person_phone –}</td>
</tr>
{– @endforeach –}
</tbody>

vue.js code here

created(){
this.rootUrl = currentUrl;
this.page = window.location.pathname.split(‘/‘).pop();
loadCustomers();
},

methods:{
loadCustomers : function(){
let uri = this.rootUrl + ‘/load_customer/‘ ;
alert(uri);
axios.get(uri)
.then(response => {
//if(response.data == ‘success’){
this.customers = response.data[‘customers’] ;
//alert(this.customers);
//}
})
.catch(function (error) {
console.log(error.response);
});
},
searchHandler(event){
let uri = this.rootUrl + ‘/search_customer/‘ + this.$refs.searchText.value ;
//alert(uri);
axios.get(uri)
.then(response => {
//if(response.data == ‘success’){
this.customers = response.data[‘customers’] ;
alert(this.customers);
//}
})
.catch(function (error) {
console.log(error.response);
});
},

I was trying to load data on created function. It’s emptying data on load.
vue.js code is loading data in background, I checked in devtool, but it is not showing data in frontend while using v-for on data table creation.

Solution :

Hi you need to add var to check if data is loaded or on progress.

loadCustomers : function(){
let uri = this.rootUrl + ‘/load_customer/‘ ;
alert(uri);

loaded: false;

axios.get(uri)
.then(response => {
//if(response.data == ‘success’){
this.customers = response.data[‘customers’] ;
loaded: true;

//alert(this.customers);
//}
})
.catch(function (error) {
console.log(error.response);
});
},

and in the view

@if(loaded){
{– @foreach($customers as $customer)–}
<tr id=”customerTable” role=”row” class=”odd” v-for=”customer in customers”>
<td class=”sorting_1”>@{ customer.company }{– $customer->company –}</td>
<td class=””>{– $customer->address –}</td>
<td>{– $customer->contact –}</td>
<td>{– $customer->contact_person –}</td>
<td>{– $customer->contact_person_phone –}</td>
</tr>
{– @endforeach –}
}
</tbody>

[Vue.js] Issues publishing to Azure cannot use imports when '--module' is 'none' Subscribe to RSS

when doing a .NET and vue.js project based on this template: https://github.com/danijelh/aspnetcore-vue-typescript-template

While I don’t have issues publishing my project to local files but I got errors when publishing to Azure VM:

Severity Code Description Project File Line Suppression State
Error TS1148 (TS) Cannot use imports, exports, or module augmentations when ‘–module’ is ‘none’. Miscellaneous ~\iceandfire\App.vue.js 36 Active
Error TS1219 (TS) Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning. Miscellaneous ~\iceandfire\App.vue.js 45 Active
Error TS2307 (TS) Cannot find module ‘vue-property-decorator’. Miscellaneous ~\iceandfire\App.vue.js 36 Active
Error TS2307 (TS) Cannot find module ‘vue-notification’. Miscellaneous ~\iceandfire\App.vue.js 38 Active

And the code is

<script lang=”ts”>
import { Vue, Component } from ‘vue-property-decorator’

import Notifications from ‘vue-notification’

Vue.use(Notifications)

@Component({
name: ‘App’
})
export default class App extends vue.js { }
</script>

I guess the strangest thing is the error happens only when publishing to Azure but all is good when publishing to local folder/files. And when I copied the published file to my Azure VM all is running fine.

Would appreciate any helps to resolve this. Thanks.

Solution :

there is used the same template and started a fresh project.
Followed below steps and deployed. It worked for me.

Installed Template:

dotnet new -i AspNetCore.Vue.TypeScript.Template

Project creation:

dotnet new vuetypescript –name Demo.Web

npm run build:prod

and then i deployed it . Please try with new project creation and try deploying.

[Vue.js] How to increment variable after X Subscribe to RSS

there is some code which increments in 50s from 0, to a max value of 5000, e.g:

0, 50, 100, 150, 200 etc…

I’m trying to change the increment amount after 1000 to increment up in 100s instead of 50s and can’t seem to figure it out, here’s my code:

getLoanAmounts: function getLoanAmounts(start, end, active) {
list = []
for (var i = start; i <= end; i++) {
if (i % 50 === 0) {
list.push({
key: i,
value: (String(i).replace(/(\d)(?=(\d{3})+$)/g, ‘$1,’))
})
}
}
this.formData.ReqLoanAmount = active
return list
},

This is a vue.js JS application, this passes in a starting value of 0, and an end value of 5000, at the moment it increments in 50s all the way up to 5,000, I’d like to change the increment after a certain value.

Solution :

Try like this.

there is done it like, in a for loop. if the value greater or equal than 1000 increment 100 else less than 1000 increment 50.

function calculate(start, end){

for(var i=start; i<=end;){

console.log(i);
if(i >= 1000 && i % 100 === 0){
//do the other calculations
i += 100;
}else if(i < 1000 && i % 50 === 0){
//do the other calculations
i += 50;
}else{
i++;
}
}

}

calculate(930,1500);

[Vue.js] Is there any way to 'watch' for localstorage in Vuejs? Subscribe to RSS

I’m attempting to watch for localstorage:

Template:

<p>token - {token}</p>

Script:

computed: {
token() {
return localStorage.getItem(‘token’);
}
}

But it doesn’t change, when token changes. Only after refreshing the page.

Is there a way to solve this without using Vuex or state management?

Solution :

Sure thing! The best practice in my opinion is to use the getter / setter syntax to wrap the localstorage in.

Here is a working example:

HTML:

<div id=”app”>
{token}
<button @click=”token++”> + </button>
</div>

JS:

new Vue({
el: ‘#app’,
data: function() {
return {
get token() {
return localStorage.getItem(‘token’) || 0;
},
set token(value) {
localStorage.setItem(‘token’, value);
}
};
}
});

And a JSFiddle.

Solution 2:

The VueJs site has a page about this.
https://vuejs.org/v2/cookbook/client-side-storage.html

They provide an example.
Given this html template

<template>
<div id=”app”>
My name is <input v-model=”name”>
</div>
<template>

They provide this use of the lifecycle mounted method and a watcher.

const app = new Vue({
el: ‘#app’,
data: {
name: ‘’
},
mounted() {
if (localStorage.name) {
this.name = localStorage.name;
}
},
watch: {
name(newName) {
localStorage.name = newName;
}
}
});

The mounted method assures you the name is set from local storage if it already exists, and the watcher allows the component to react whenever the name in local storage is modified. This works fine for when data in local storage is added or changed, but vue.js will not react if someone wipes their local storage manually.

Solution 3:

If you want to avoid boilerplate (getter/setter-syntax), use vue-persistent-state to get reactive persistent state.

For example:

import persistentState from ‘vue-persistent-state’;

const initialState = {
token: ‘’ // will get value from localStorage if found there
};
Vue.use(persistentState, initialState);

new Vue({
template: ‘<p>token - {token}</p>’
})

Now token is available as data in all components and vue.js instances. Any changes to this.token will be stored in localStorage, and you can use this.token as you would in a vanilla vue.js app.

The plugin is basically watcher and localStorage.set. You can read the code here. It

adds a mixin to make initialState available in all vue.js instances, and
watches for changes and stores them.

Disclaimer: I’m the author of vue-persistent-state.

[Vue.js] v-model isn't being updated on input on Android Chrome browser Subscribe to RSS

I’ve created a searchable table, which works as expected on desktop. Testing on mobile however, the search function doesn’t return the filtered drivers as expected.

I’ve tried remote debugging. Strangely if I input to my phone from my PC, the search works. As soon as I try to input from my phone directly, the search doesn’t filter correctly.

In my template:

<input type=”text” v-model=”searchQuery” @input=”filterStandings” placeholder=”search driver”>
<table class=”standings”>
<thead>
<th>Position</th>
<th>Driver Name</th>
<th>Nationality</th>
<th>Team</th>
<th>Wins</th>
<th>Points</th>
</thead>
<tbody>
<tr v-for=”standing in filteredStandings” :key=”standing.position” class=”standing”>
<td>{standing.position }</td>
<td>{standing.Driver.driverId | last-name | to-title-case}</td>
<td>{standing.Driver.nationality | to-title-case}</td>
<td>{standing.Constructors[0].constructorId | to-title-case}</td>
<td>{standing.wins }</td>
<td>{standing.points}</td>
</tr>
</tbody>
</table>

script:

<script>
import styles from “../styles/styles.scss”;
import { mapState, mapGetters, mapActions, mapMutations } from “vuex”;

export default {
name: “CurrentStandings”,

data() {
return {
searchQuery: “”
};
},

created() {
this.fetchStandings();
},

computed: {
…mapState([“standings”, “search”]),
…mapGetters([“filteredStandings”])
},

methods: {
…mapActions([“fetchStandings”]),
…mapMutations([“set_search”]),

filterStandings() {
this.$store.commit(“set_search”, this.searchQuery);
}
}
};
</script>

Finally, my store:

import axios from ‘axios’;

const state = {
standings: [],
search: ‘’,
};

const getters = {

filteredStandings: state => state.standings.filter(standing => standing.Driver.driverId.match(state.search)),
};

const mutations = {
set_standings: (state, standings) => (state.standings = standings),
set_search: (state, search) => (state.search = search),
};

const actions = {
async fetchStandings({ commit }) {
const response = await axios.get(‘https://ergast.com/api/f1/current/driverStandings.json');
commit(‘set_standings’, response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings); // response.data is passed to ‘standings’ in the mutation (2nd arg)
},
};

export default {
state,
getters,
actions,
mutations,
};

Here’s the link to my app if you’d like to see for yourself. Thanks in advance!

Solution :

Try using

filterStandings({ type, target }) {
this.$store.commit(“set_search”, target.value);
}

The value in the store may be stale in some fashion, causing some sort of cyclical “blank” on slower devices? You could try using chrome CPU throttling to test this theory.

In this case you are taking the input directly from the event rather than relying on a possible stale value.

Should you be using v-model with vuex this way? See:
https://vuex.vuejs.org/guide/forms.html

[Vue.js] How to render specific component attribute according to route name Subscribe to RSS

In vue.js when I need to apply certain classes according to route I do :class=”$route.name == ‘canceled’ ? ‘active’ : ‘’”.

How can I apply the same method in v-btn attribute itself and render <v-btn outline> or just <v-btn> according to route name.

Solution :

outline attribute value can be bound with v-bind directive or : colon shorthand. As the documentation explains, boolean value will result in adding or removing HTML attribute:

<v-btn :outline=”$route.name == ‘canceled’”>

[Vue.js] Word Order in Search Bars Using JavaScript Subscribe to RSS

Explanation. when new to VueJS and JavaScript and when trying to setup a search bar. So far, it works well, but there is one issue with it. I would like to be able to search through a description of an object even if the words I typed in the search bar are not in the correct order.

Example.
The string in the description would be “Gucci blue belt”. If I type “Gucci blue”, the result shows up since the description contains those words in this exact order. Therefore, I would like to add the functionality for which I can type “Gucci belt” and the item with the description “Gucci blue belt” would show up.

My current code in the computed section in VueJS

filteredsortedobjects (){
return this.sortedobjects.filter(object => {
var Objectslist_n = object.name;
var Objectslist_q = object.quantity;
var Objectslist_c = object.category;
var Objectslist_s = object.section;
var Objectslist_d = object.description;
var Objectslist_date = object.reception_date;
var Input = this.searchQuery;

/* Form arrays with all the information in the table */

var Objectslist_nq = Objectslist_n.concat(Objectslist_q);
var Objectslist_nqc = Objectslist_nq.concat(Objectslist_c);
var Objectslist_nqcs = Objectslist_nqc.concat(Objectslist_s);
var Objectslist_nqcsd = Objectslist_nqcs.concat(Objectslist_d);
var Objectslist_nqcsddate = Objectslist_nqcsd.concat(Objectslist_date);

/* Filtered variables */

var F_Objectslist = RemoveAccents(Objectslist_nqcsddate.toLowerCase());
var F_Input = RemoveAccents(this.searchQuery.toLowerCase());

/* Function to remove accents */

function RemoveAccents(str) {
var accents = ‘’;
var accentsOut = “AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz”;
str = str.split(‘’);
var strLen = str.length;
var i, x;
for (i = 0; i < strLen; i++) {
if ((x = accents.indexOf(str[i])) != -1) {
str[i] = accentsOut[x];
}
}
return str.join(‘’);
};
console.log(F_Objectslist);
console.log(F_Input);
return F_Objectslist.includes(F_Input)
})
}

when aware that the function to remove accents is not yet used since there is been testing things.

What there is tried doing. there is tried setting the variable F_Input (what is being written in the search bar) and F_Objectslist (a variable containing an array with all the words for the items, for instance, the names, the category, the section, the quantity, a description and a date) as strings by array.split(“ “). That way, I was able to have an array of strings in this format in the console [“word”, “word2”, …] for both my variables.

From this point, when unsure on how to check if the strings in my F_Input array are all present in the array for F_Objectslist even if they are in a different order.

Thank you so much for the time!

Solution :

Split F_Input on “ “, then you can use ‘Array.prototype.map()’ to loop through the F_Input array of search terms using the same technique you have now.

Notice that I’ve chained all these together with a final call to the .every() method. That last one says that every map operation (search) must result in a true (or the result of the map operation must result in an array full of nothing but true);

const F_Objectslist = “this is search term, and this is term search”.split(‘ ‘);
const F_Input = “search term”;

let result = search(F_Objectslist, F_Input);
console.log(result);

let notFoundResult = search(F_Objectslist, “search dog”);
console.log(notFoundResult);

function search(text, terms) {
return terms.split(‘ ‘).map(term =>text.includes(term)).every(found=>found===true);
}

Solution 2:

I think you were already pretty close, I would approach it like this

function searchString(input, match) {
let is_a_match = true;

const match_arr = match.split(‘ ‘);
const input_arr = input.split(‘ ‘);

input_arr.forEach(word => {
if (match_arr.indexOf(word) === -1) {
is_a_match = false;
}
});

return is_a_match;
}

A working fiddle can be found here

Solution 3:

Here is my answer.

I managed to make a quite responsive search bar that seeks information in the array! Here is the code if anyone is curious about it!

page.vue.js inside computed

filteredsortedobjects (){
return this.sortedobjects.filter(object => {
var Objectslist_n = “a” + object.name;
var Objectslist_c = object.category;
var Objectslist_s = object.section;
var Objectslist_q = object.quantity;
var Objectslist_d = object.description;
var Objectslist_date = object.reception_date;
var Input = this.searchQuery;

/* Form arrays with all the information in the table */

var Objectslist_nc = Objectslist_n + “ “ + Objectslist_c;
var Objectslist_ncs = Objectslist_nc + “ “ + Objectslist_s;
var Objectslist_ncsq = Objectslist_ncs + “ “ + Objectslist_q;
var Objectslist_ncsqd = Objectslist_ncsq + “ “ + Objectslist_d;
var Objectslist_ncsqddate = Objectslist_ncsqd + “ “ + Objectslist_date;

/* Filtered variables */

var F_Objectslist = RemoveAccents(Objectslist_ncsqddate.toLowerCase()).split(“ “) + “ “;
var F_Input = RemoveAccents(this.searchQuery.toLowerCase()).split(“ “);

/* Function to remove accents */

function RemoveAccents(str) {
var accents = ‘’;
var accentsOut = “AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz”;
str = str.split(‘’);
var strLen = str.length;
var i, x;
for (i = 0; i < strLen; i++) {
if ((x = accents.indexOf(str[i])) != -1) {
str[i] = accentsOut[x];
}
}
return str.join(‘’);
};

return F_Input.every(object => {
if (F_Objectslist.indexOf(object) === -1) {
}
else {
return F_Objectslist.indexOf(object)
}
})

})
}

there is an input with a v-model=”searchQuery” attribute. Also, there is a table containing

<tr id=”tr” v-for=”object in filteredsortedobjects” v-bind:key=”object.name”>
<td>
<p>{ object.name }</p>
</td>
<td>
<p>{ object.category }</p>
</td>
<td>
<p>{ object.section }</p>
</td>
<td>
<p>{ object.quantity }</p>
</td>
<td>
<p>{ object.description }</p>
</td>
<td>
<p>{ object.reception_date }</p>
</td>
</tr>

The object.something are imported from a JSON file using

<script>
import objects from “./Database/Objects.json”;
</script>

You would probably have to set some data information in the data() section

searchQuery: “”

[Vue.js] Avoid mutating a prop directly in reusable components Subscribe to RSS

I’m trying to reuse a custom dropdown that there is created in my component file where props are the value options in dropdown. When i start to select the dropdown i realized a vue.js warn msg:

[vue.js warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “item”

What is the best practice & how I should write this in order to not have prop mutating value?

<template>
<v-app>
<SearchSelect
v-model=”newItem.a”
:options=”aList”></SearchSelect>
<SearchSelect
v-model=”newItem.b”
:options=”bList”></SearchSelect>
<SearchSelect
v-model=”newItem.c”
:options=”cList”></SearchSelect>
</v-app>
</template>

<script>
export default {
name: “Sales”,
data() {
return {
aList: [
{ value: “A1”, text: “A1” },
{ value: “A2”, text: “A2” },
{ value: “A3”, text: “A3” },
{ value: “A4”, text: “A4” },
{ value: “A5”, text: “A5” }
],
bList: [
{ value: “B1”, text: “B1” },
{ value: “B2”, text: “B2” },
{ value: “B3”, text: “B3” }
],
cList: [
{ value: “C1”, text: “C1” },
{ value: “C2”, text: “C2” },
{ value: “C3”, text: “C3” }
],
}
}
}
};
</script>

Solution :

Instead of mutating the property, you emit an event to the parent. The parent then mutates the value, and that new value is usually reflowed back down to the child’s property.

The v-model directive in the parent works by v-binding data it ‘owns’ to the :value property and listening for the @input v-on event.

In the case, the owner of newItem.a should be updating it, but most likely SearchSelect is setting it instead of emitting an event.

You can also avoid the $emit to the parent by using state management, in which case the store would be the source of truth; You would then commit or dispatch instead of emit.