link1096 link1097 link1098 link1099 link1100 link1101 link1102 link1103 link1104 link1105 link1106 link1107 link1108 link1109 link1110 link1111 link1112 link1113 link1114 link1115 link1116 link1117 link1118 link1119 link1120 link1121 link1122 link1123 link1124 link1125 link1126 link1127 link1128 link1129 link1130 link1131 link1132 link1133 link1134 link1135 link1136 link1137 link1138 link1139 link1140 link1141 link1142 link1143 link1144 link1145 link1146 link1147 link1148 link1149 link1150 link1151 link1152 link1153 link1154 link1155 link1156 link1157 link1158 link1159 link1160 link1161 link1162 link1163 link1164 link1165 link1166 link1167 link1168 link1169 link1170 link1171 link1172 link1173 link1174 link1175 link1176 link1177 link1178 link1179 link1180 link1181 link1182 link1183 link1184 link1185 link1186 link1187 link1188 link1189 link1190 link1191 link1192 link1193 link1194 link1195 link1196 link1197 link1198 link1199 link1200 link1201 link1202 link1203 link1204 link1205 link1206 link1207 link1208 link1209 link1210 link1211 link1212 link1213 link1214 link1215 link1216 link1217 link1218 link1219 link1220 link1221 link1222 link1223 link1224 link1225 link1226 link1227 link1228 link1229 link1230 link1231 link1232

[Vue.js] bind v-model to the property which does not exist (Array) in Vue JS

there is some questions getting from the database, It has options also. Then rendering those on the webpage.

like This

<div v-for=”(question,index) in questions”>
<div class=”interview__item-text interview__text-main m-b-20”>
{ index+1 }. { question.question }
</div>

<div v-for=”(option,index) in question.options”
class=”reg__form-radioitem” :key=”index”>
<div>

<input class=”checkbox countable__input”
v-model=”question.answer”
:value=”option.option”
type=”checkbox”
:id=”question.id+option.id”>
<label :for=”question.id+option.id”>
{ option.option }
</label>
</div>
</div>
</div

This is working fine for input type text and radio but for checkbox it does not work. It checks all the checkboxes in that loop.

question.answer does not exist on the data.when trying to add new property answer using v-model
Thanks.

Solution :

Maybe you can try to predefine the question.answer, should exist after this:

data: {
question: {
answer: null
}
}

Solution 2:

Try this.

<input class=”checkbox countable__input”
v-model=”question[answer]“
:value=”option.option”
type=”checkbox”
:id=”question.id+option.id”>
<label :for=”question.id+option.id”>
{ option.option }
</label>

[Vue.js] Force older version of vuejs devtools or download older version

Recently vue.js devtools was updated to a newer version. when using the devtools heavily to check my vuex store. After the update the data does not show anymore. The data is updated after mutations but not shown in the devtool.

Does anyone know how to use the older version again?

Thanks in advance!

Solution :

There is a Settings tab on the newer version which allows you to keep the Veux store synchronized at all times.
All you need to do is to enable it.

Solution 2:

All releases can be found on their Github page: Here

Download the preferred version, then follow the steps written under Manual installation

[Vue.js] Vue JS with regular bootstrap

Ive been searching around for a while now, but cant seem to find the correct answer.
Im going to start a new vue.js JS project which will use bootstrap. The bootstrap-vue.js project seems to be the obvious choice. The problem is that the company when working for has created their own implementation of Boostrap (v4) with their own styles and elements.
I can understand that the use of regular bootstrap which uses jQuery does not play nicely with vue.js and its shadow dom.
But what is exactly the problem? when not using jQuery any other place in the code, and bootstrap is not managing the datamodel. So why is the use of vue.js js and regular bootstrap together unrecommended?

Thanks!

Solution :

People doesn’t approve jQuery + vue.js for the simple reason that jQuery is not necessary and duplicates a lot of vue.js functionality being less reactive, but jQuery CAN coexist with Vue.

If you start a new project I would recommend using another alternative (Bulma, Bootstrap vue, etc) that is more agnostic and does not depend on any other library.

In the case, I understand that only CSS classes have been customized. I think you could install the latest version of Bootstrap-vue.js and add those customizations, if the bootstrap version is the same, it should not collide too much. Still, I understand that it will be complicated, since Bootstrap-vue.js generates the HTML from its already created components, which makes it a bit complicated that the first one looks the way you want without adjusting.

[Vue.js] Determining pr eliminating empty key value from an object for multiple filtering purposes

My app has a feature where users can filter results based on “blood group” and “city”, and areas. Results will be retrieved from DB using Axios for Vuejs through “URL” query strings. Example url is: http://example.com/api/results?blood=a+&city=london

It should work in a way that when a user select just blood group from select menu: the url would exclude the city parameter. But from my current code, I can’t get it stripped of, as a result, the database query returns no results on the basis that cityreturns null value.

Here’s what there is in my vue.js component:

<script>
export default {
props: [‘user’],

data() {
return {
auth_user: this.user,
results: {},
blood_groups: “”,
cities: “”,
districts: “”,
areas: “”,
donorUrl: “/api/donors”,
requestedBlood: “”,
requestedCity: “”,
requestedDist: “”,
requestedArea: “”,
params: {}

};
},

created() {
this.fetchDonors();

this.fetchCities();
},

methods: {
fetchDonors() {
let url = “/api/donors”;

axios.get(url).then(response => {
this.results = response.data.data;
this.blood_groups = […new Set(response.data.data.map(x=> x.blood_group))];
});
},

fetchCities() {

let url = “/api/location_type/cities”;

axios.get(url).then(response => {
this.cities = response.data.cities
})
},

selected_blood_group(event) {

this.requestedBlood = event.target.value;

this.get();
},

get_city(event) {

this.requestedCity = event.target.value;

this.get();
},

get() {

let request = {
params: {
blood: this.requestedBlood,
city: this.requestedCity,
dist: this.requestedDist,
area: this.requestedArea
}
}

axios.get(‘/api/donors’, request).then(response => {
this.results = response.data.data
})

}
},

};
</script>

My query is how can I remove or check if any of the following properties contains empty value, so that I do not include them in axios params?

let request = {
params: {
blood: this.requestedBlood,
city: this.requestedCity,
dist: this.requestedDist,
area: this.requestedArea
}
}

Solution :

You can try below code.

Create a new object(called testParams) and add that object in params.suppose requestedCity is selected(not only but any variable is selected ). Then you can do like below.

if(requestedCity.length!=0)
{
testParams[“city”]=requestedCity; // OTHERWISE DON’T ADD IN testParams object
}

Finally while making request through axios add testParams in params object like below.

axios.get(‘/yourUrl/‘,{
params:{
testParams //here vue.js will automatically sets ‘testParams’:testParams
}
})

Solution 2:

I got it working with the following approach:

let request = {
blood: this.requestedBlood,
city: this.requestedCity,
dist: this.requestedDist,
area: this.requestedArea
}

for(let k in request)
if(!request[k]) delete request[k];

axios.get(‘/api/donors’, {
params: request
}).then(response => {
this.results = response.data.data
})

[Vue.js] How to solve noscript - doesn't work properly without JavaScript enabled when serving a Vue App

I’m setting up a new Vue.JS application using the vue.js UI interface.
When I start the application using vue.js serve src/App.vue.js the application starts but it only displays in the page the default Home | About.
When I inspect the page in the HTML I see:

<noscript>
<strong>We’re sorry but basicapp doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

and in the console I see

[vue.js warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

found in

-–> <App> at src/App.vue
<Root>

when working with the basic application created when running the vue.js UI

when working with the basic application created when running the vue.js UI
If I run the application using the vue.js ui command followed by starting the application from the vue.js UI it works.

The reason to open the application using the command line is that in Cloud9 where to test the application the vue.js ui starts on localhost and I cannot find a way to open it. The only changes I made to the application files were done only to make the application run inside the Cloud9 container:
changed the package.jsonadded:

“dev”: “webpack-dev-server –inline –progress –port 8080 –host 0.0.0.0 –config vue.config.js –public $C9_HOSTNAME”,

created the vue.config.js and added:

module.exports = {
devServer: {
compress: true,
disableHostCheck: true,
},
}

Solution :

I found the problem.
To start the application you need to run the command npm run serve. Works well in the Cloud9 container and also on my local machine.

[Vue.js] Uncaught SyntaxError in JS file

I’m adding a JS file to Html yet I’m getting a syntax error “Uncaught SyntaxError: Unexpected identifier”

<script src=”./includes/vuetags/main.js” ></script>

JS file (main.js) - the error is traced by chrome to line 1

import VoerroTagsInput from ‘./VoerroTagsInput.vue’;

window.VoerroTagsInput = VoerroTagsInput;

export default VoerroTagsInput

Any ideas why it tells me there is an error?

Thanks

Solution :

I suspect that the error is not in line 1 of “main.js” (the file you show), but in line 1 of the included “VoerroTagsInput.vue”. A “*.vue” file is a custom file format that uses HTML-like syntax to describe a vue.js component. Thus, you cannot import JavaScript code from there.

[Vue.js] Show/hide an element within one list item, not all of them

I’ve generated a dynamic list of comments on a post from my server in Vue, and would now like a ‘reply’ button to appear on each comment that when clicked opens a textarea underneath it and is linked to that comment. However, my hacky solution meant that clicking on it opened all of the comments’ text boxes, not just one.

How can I target each comment individually with a show/hide function in Vue?

I know why my solution isn’t workingbut I don’t know where to start making a function that targets the specific comment on clicking it.

Template (HTML)

<ul>
<li v-for=”comment in comments” :key=”comment.data.id”>
<div>User details</div>
<div>Comment content</div>
<div>
<span>
<a v-on:click=”hideReply = !hideReply”>Reply</a>
</span>
</div>

<form v-if=”hideReply”>
<textarea>Reply text box</textarea>
<button>Reply button</button>
</form>
</li>
<li>Another comment in the list…</li>
<li>Another comment in the list…</li>

</ul>

Script (JS)

export default {
name: ‘Post’,
components: {},
data () {
return{
hideReply: false,
comment: undefined,
comments: undefined
}
},
async created () {
// code to bring in my comments from server
},
methods: {
betterShowHideFunction () {
// where do i start
}
}
}

Solution :

Add a show property on each comment and use that for showing/hiding each individual comment

<form v-if=”comment.show”>

Change the var accordingly

<a v-on:click=”comment.show = !comment.show”>Reply</a>

[Vue.js] What's format of `en.js` or `ja.js` in lazy load vue-i18n

What’s format of en.js or ja.js in lazy load? below code doesn’t work:

// en.js
export default
{
title: ‘Title’,
greeting: ‘How are you’
};

and

import vue.js from ‘vue’;
import InventoryList from “./components/InventoryList”;
import VueI18n from ‘vue-i18n’;
import messages from ‘lang/fa’;

Vue.use(VueI18n);

const i18n = new VueI18n({
locale: ‘en’,
fallbackLocale: ‘en’,
messages
});

Vue.component(‘inventory-list’, InventoryList);

const app = new Vue({
i18n,
el: ‘#app’,
});

What should I do?

Solution :

You need to include all the language files and assign them to the messages key in VueI18n init call.

Something like this:

import fa from ‘lang/fa’
import en from ‘lang/en’

const i18n = new VueI18n({
locale: ‘en’,
fallbackLocale: ‘en’,
messages: {
en,
fa
}
});

[Vue.js] Vue axios FormData object transforms appended values

when using axios to upload multiple files and some other stuff. Among this other stuff are arrays of integers (from checkboxes) and some boolean values.

At first I tried this:

axios.post(this.route, {
name: this.name,

photos: this.photos
})

And everything was perfect except that the backend received the photos as empty objects.
So I tried the following

let formData = new FormData()
formData.append(‘name’, this.name)

for(let i = 0; i < this.photos.length; i++) {
let photo = this.photos[i]

formData.append(‘photos[‘+i+’]‘, photo)
}
axios.post(this.route, formData)

And the photos worked just fine, but other data like arrays and boolean values from radios started coming wrong. FormData transforms them into strin, and before the backend was receiving them like arrays and booleans directly, that. when using Laravel as backend and the validations do not pass that way.

Solution :

If you want to upload files and other structured JSON data, then you will need to manually JSON-stringify all the other data alongside the files.

Here’s an example:

const fd = new FormData()

// Include file
fd.append(‘photo’, file)

// Include JSON
fd.append(‘data’, JSON.stringify({
name: ‘Bob’,
age: 20,
registered: true,
})

axios.post(‘/users’, fd)

On the server you will also need to manually JSON-parse the data field using json_decode (sorry I’m not familiar with Laravel or PHP).

Solution 2:

I managed to make the formdata send the data the way to. I wish there was a simpler way but here’s what I’ve done.

let formData = new FormData()
formData.append(‘name’, this.name)
formData.append(‘phone’, this.phone)
formData.append(‘email’, this.email)
formData.append(‘house_state’, this.house_state)

// The boolean values were passed as “true” or “false” but now I pass them as “0” or “1” which is strill a string but Laravel recognizes it as an indicator of true or false
formData.append(‘has_lived_soon’, this.has_lived_soon ? 1 : 0)
formData.append(‘can_rent_now’, this.can_rent_now ? 1 : 0)

formData.append(‘beds_count’, this.beds_count)
formData.append(‘seasonality’, this.seasonality)

// Here’s what I do for the arrays
for(let extra of this.extras_values) {
formData.append(‘extras[]‘, extra)
}

formData.append(‘estate_issues’, this.estate_issues ? 1 : 0)
formData.append(‘road_state’, this.road_state)
formData.append(‘usability’, this.usability ? 1 : 0)

for(let heating_method of this.heating_values) {
formData.append(‘heating_methods[]‘, heating_method)
}

formData.append(‘heating_other’, this.heating_other)
formData.append(‘address’, this.address)

for(let i = 0; i < this.photos.length; i++) {
let photo = this.photos[i]

formData.append(‘photos[‘+i+’]‘, photo)
}

axios.post(this.route, formData)
.then(function(response) {
console.log(response.data)
})
.catch(function(error) {
app.errors = error.response.data.errors
})

[Vue.js] Vue js data value is not changing after assign

there is defined the data like this

data() {
return {
mdrender: ‘’,
markdown: ‘’
};
},

And there is this function :

methods: {
interpretVars: function(markdown) {
$.getJSON(“/api/v1/getdoc?code=” + this.$route.query.code, function (result) {
var interpreted = markdown.replace(/\{\#(companyName)\#\}/g, ‘Demo’)
.replace(/\{\#(docType)\#\}/g, result[0].datas.category).replace(/\{\#(version)\#\}/g, result[0].datas.version)
.replace(/\{\#(docTitle)\#\}/g, result[0].datas.title);
this.markdown = interpreted;
console.log(interpreted);
return interpreted;
});
}
},

Now the problem is that the markdown data value does not take the new value, while the variable that I’m console logging interpreted have the correct value.

I’m doing something wrong?
Thanks in advance for replying.

Solution :

the problem is the use of the function() statement. So you will loose the scope and this doesn’t represents to the current vue.js instance. There are two possible solutions to fix this:

Use an arrow function:

methods: {
interpretVars: function(markdown) {
$.getJSON(“/api/v1/getdoc?code=” + this.$route.query.code, (result) => {

});
}
},

Use a helper variable:

methods: {
interpretVars: function(markdown) {
var $this = this;
$.getJSON(“/api/v1/getdoc?code=” + this.$route.query.code, function (result) {

$this.markdown = interpreted;
});
}
},

Solution 2:

I guess the best way of doing this would be doing it like this :

methods: {
async interpretVars(markdown) {
$.getJSON(“/api/v1/getdoc?code=” + this.$route.query.code, function (result) {
var interpreted = markdown.replace(/\{\#(companyName)\#\}/g, ‘Demo’)
.replace(/\{\#(docType)\#\}/g, result[0].datas.category).replace(/\{\#(version)\#\}/g, result[0].datas.version)
.replace(/\{\#(docTitle)\#\}/g, result[0].datas.title);

this.markdown = interpreted;
console.log(interpreted);
return interpreted;
});
}

This should work as expected i guess, please don’t assign this to temp variable.

Solution 3:

Store this scope variable to a temporary variable and use that variable.

methods: {
interpretVars: function(markdown) {
let that = this;
$.getJSON(“/api/v1/getdoc?code=” + this.$route.query.code, function (result) {
var interpreted = markdown.replace(/\{\#(companyName)\#\}/g, ‘Demo’)
.replace(/\{\#(docType)\#\}/g, result[0].datas.category).replace(/\{\#(version)\#\}/g, result[0].datas.version)
.replace(/\{\#(docTitle)\#\}/g, result[0].datas.title);
that.markdown = interpreted;
console.log(interpreted, that.markdown);
return interpreted;
});
}
},