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] Vue Variable not safed, when other component is shown Subscribe to RSS

there is two components. One of it gives the value height to the other one, when “submit” is clicked. When “submit” is clicked the first component should be hidden and the second one visible.
It works so far, but it seems like height is not safed in the second component.

Thanks a lot!!

without the v-if it works perfect!

//ComponentOne
<template>
<body>
<div id=”aside”>
<footer>
<b-button v-on:click=”submit”>Submit</b-button>
</footer>
</div>
</body>

</template>

<script>
import { EventBus } from ‘@/main.js’
export default {
data() {
return {
submitp1: false,

height: 5,
width: 6,

}
},
methods: {
submit: function () {
this.submitp1 = !(this.submitp1)
EventBus.$emit(‘submitp1emit’, this.submitp1)
EventBus.$emit(‘1to2’, this.height)
}
},
}

</script>

//ComponentTwo
<template>
<div >
number <br />
height: {height}

</div>
</template>
<script>
import { EventBus } from ‘@/main.js’
export default {
data: function () {
return {
height: ‘’,
}
},

mounted() {
const self = this
EventBus.$on(‘1to2’, function{ height) {
self.height = height
})
}
}

</script>

//main.js
<template>
<div id=”app”>
<ComponentOne v-if=”submitp1 == false” />
<ComponentTwo v-if=”submitp1 == true” />

</div>
</template>
<script>
import { EventBus } from ‘@/main.js’
import ComponentOne from ‘@/components/p1Comp/ComponentOne.vue’
import ComponentTwo from ‘@/components/p1Comp/ComponentTwo.vue’

export default {
components: {
ComponentOne,
ComponentTwo
}
data: function () {
return {
submitp1: false
}
},
mounted() {
const self = this
EventBus.$on(‘submitp1emit’, function (submitp1emit) {
self.submitp1 = submitp1emit
})
}
}
</script>

Solution :

From the vue.js documentation:

v-if is real conditional rendering because it ensures that event
listeners and child components inside the conditional block are
properly destroyed and re-created during toggles.

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

The toggled component is simply not there. As already mentioned, you can use “v-show” instead.

[Vue.js] Vue-cli VS module bundler and task runner Subscribe to RSS

Heres my situation: Im a junior developer who has to create the front end of a big web app, but although there is worked on these kinds of apps before I never had to set the whole environment around the app, everything was already in place every time and I could just to use the tools.

Im asked to choose, among others, which module bundler and task runner to use. Though the more info I find about this the more I get the feeling that every time its something that vue-cli is already handling.
Why should I install gulp or webpack when vue.js build compiles the typescript, minify the js and css, and bundle all of that in unique files (and others) ?

Is it precisely the whole point of vue-cli, or am I missing something important here ?

Thank you in advance for the advices :)

Solution :

As answered by Varcorb and here : https://forum.vuejs.org/t/vue-cli-vs-module-bundler-and-task-runner/65891 it is indeed the whole point of vue.js CLI so no need of gulp or webpack for basic projects

[Vue.js] Vuejs watcher not reacting to prop's change Subscribe to RSS

there is a simple .vue.js component in which there is one prop request and a watcher to watch this prop. If request is true then I call a method.

The problem is, my watcher is not reacting to the changes.

there is tried to make the code below work.

foobar.vue

<template><div> … </div></template>

<script>
export default {
// …
props: {
request: {
type: Boolean,
required: false,
default: false
}
},
watch: {
request (state) {
if(state) {
// run some method
}
}
}
}
</script>

I now call the component as (after requiring it)

<template>
<foobar :request=”access”> </foobar>

<button @click=”access = !access”> { access ? ‘Turn off’ : ‘Turn on’} </button>
</template>

<script>
export default {
data () {
return { access: false }
},
components: { foobar }
}
</script>

Solution :

Set the watcher to immediate.

watch: {
request :
immediate:true,
handler(state) {
if(state){
// run some method
}
}
}
}
}

[Vue.js] Axios then function also does catch? Subscribe to RSS

My post is successful, but I can’t do anything in the then statement except console.log(); it always jumps to the catch.

axios.post(‘/group/15/discussion/‘+ this.discussion.id+ ‘/schedule’,this.form, {handleErrors:true})
.then(function(response) {
//this.form.valid = true;
console.log(“success”);

console.log(‘set form valid’);
this.$refs[‘schedule-group-discussion-‘+this.id].hide();
console.log(‘close modal’);
/*this.$emit(‘updateDiscussion’,response.data.discussion);
this.$toast.success(response.data.message,’Success!’,{icon: ‘fas fa-check-circle’});*/
})
.catch((error) => {
console.log(“catch”);
this.form.valid = false;
});

here is my console log in order:
success
set form valid
catch

What is wrong?

Solution :

The problem is the scope of this. You’re actually getting an error, cannot read property valid of undefined, but you didn’t console.log(error). You need to use the fat arrow function in the .then() as well:

.then(function(response) {

to

.then((response) => {

Now this is scoped correctly.

[Vue.js] How to looping in img tag src using vuejs? Subscribe to RSS

I’m making some booking movie ticket webapp and now to fetch Movie Poster.jpg in loop and It’s not working

Movie.vue

<template>
<v-container grid-list-xs text-xs-center>
<v-layout justify-center row wrap>
<v-flex v-for=”m in movies” :key=”`1${m}`“ xs2>
<img :src=”imgsrc(m.id)” height=”326px” width=”220px”> ///my problem
</v-flex>
</v-layout>
</v-container>
</template>

And to use

<img :src=”imgsrc(m.id)”>

For looping and here my script

<script>
import { movies } from “@/Others/movie.json”;
console.log(movies);

export default {
props: [“movieId”],
data() {
return {
movies
};
},
methods: {
imgsrc(movieId) {
let result = `assets/movie_poster/${movieId}.jpg`;
return result;
}
.
.
.

Movie.vue.js path

project/src/components/Movie.vue

Movie Poster.jpg path

project/src/assets/movies_poster/[filename].jpg

My Movie.JSON

{
“movies”:[
{ “id”: “Black panther”},
{ “id”: “Avengers Infinity”},
{ “id”: “Avengers Endsgame”},
{ “id”: “Ant-Man”},
{ “id”: “Spiderman Home Coming”}
],
“Black_panther”:[
{“id”:”A1”, “seated”: false, “price”: 120},
{“id”:”A2”, “seated”: false, “price”: 120},
{“id”:”A3”, “seated”: false, “price”: 120},
{“id”:”A4”, “seated”: false, “price”: 120},
{“id”:”A5”, “seated”: true, “price”: 120},
{“id”:”B1”, “seated”: true, “price”: 120},
{“id”:”B2”, “seated”: false, “price”: 120},
{“id”:”B3”, “seated”: true, “price”: 120},
{“id”:”B4”, “seated”: true, “price”: 120},
{“id”:”B5”, “seated”: false, “price”: 120},
{“id”:”C1”, “seated”: true, “price”: 120},
{“id”:”C2”, “seated”: false, “price”: 120},
{“id”:”C3”, “seated”: true, “price”: 120},
{“id”:”C4”, “seated”: false, “price”: 120},
{“id”:”C5”, “seated”: true, “price”: 120}
],
.
.
.
.

Solution :

EDIT: I didn’t take into account that you are destructuring during import… so I added destructuring to my example, which is working just fine.. I’m not really sure what the issue is here since it’s working just fine for me…

Are you exporting that JSON object from ‘movies.json’ via export default … ?

[CodePen Mirror]

const moviesJson = {
movies: [
{ id: “Black panther” },
{ id: “Avengers Infinity” },
{ id: “Avengers Endsgame” },
{ id: “Ant-Man” },
{ id: “Spiderman Home Coming” }
],
Black_panther: [
{ id: “A1”, seated: false, price: 120 },
{ id: “A2”, seated: false, price: 120 },
{ id: “A3”, seated: false, price: 120 },
{ id: “A4”, seated: false, price: 120 },
{ id: “A5”, seated: true, price: 120 },
{ id: “B1”, seated: true, price: 120 },
{ id: “B2”, seated: false, price: 120 },
{ id: “B3”, seated: true, price: 120 },
{ id: “B4”, seated: true, price: 120 },
{ id: “B5”, seated: false, price: 120 },
{ id: “C1”, seated: true, price: 120 },
{ id: “C2”, seated: false, price: 120 },
{ id: “C3”, seated: true, price: 120 },
{ id: “C4”, seated: false, price: 120 },
{ id: “C5”, seated: true, price: 120 }
]
};

// SIMULATE DESTRUTURE DURING IMPORT
const { movies } = moviesJson;

new Vue({
el: “#app”,
props: [“movieId”],
data() {
return {
movies
};
},
methods: {
imgsrc(movieId) {
let result = `assets/movie_poster/${movieId}.jpg`;
return result;
}
}
});
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel=”stylesheet” />
<link href=”https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel=”stylesheet” />

<div id=”app”>
<v-app id=”inspire”>
<ul>
<li v-for=”m in movies” :key=”`1${m}`“>{ imgsrc(m.id) }</li>
</ul>
<v-container grid-list-xs text-xs-center>
<v-layout justify-center>
<v-flex v-for=”m in movies” :key=”`1${m}`“ xs2>
<img :src=”imgsrc(m.id)” height=”326px” width=”220px”>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>

[Vue.js] How to add text above the delimiters of a carousel using Vuetify? Subscribe to RSS

when using Vue/Vuetify and need to add text to carousel slides for descriptions. I think placing the text above the delimiters and below the image is the best place for it. I’d rather not overlay the text on the image. Vuetify documentation doesn’t give any examples for this. How can this be done?

Solution :

You can make own carousel design inside of v-carousel-item tags, using vuetify elements to place text where you want. Example on cedepen

<div id=”app”>
<v-app id=”inspire”>
<v-container fluid>
<v-layout row wrap justify-center>
<v-flex xs6>
<v-carousel hide-delimiters>
<v-carousel-item
v-for=”(item,i) in items”
:key=”i”
\>
<v-img
:src=”item.src”
class=”fill-height”
\>
<v-container
fill-height
fluid
pa-0 ma-0

\>
<v-layout fill-height align-end>
<v-flex xs12>
<v-card color=”red” class=”pa-2” >
<span class=”headline white–text” v-text=”item.src”> </span>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-img>
</v-carousel-item>
</v-carousel>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>

[Vue.js] How to persist a mounted checkbox value to the server/database with Vue.js Subscribe to RSS

Building an app w/ Vue.js and Laravel for the server/API.

there is a list of collaborators where each collaborator has a boolean property for edit_access that are displayed on the page like so:

<ul v-for=’collaborator in collaborators’ :key=’collaborator.id’>
<li>
@{ collaborator.email }
<input type=’checkbox’ v-model=’collaborator.edit_access’>
</li>
</ul>

As you can see, I’ve used v-model on the checkbox, so the user can toggle the edit access for the given collaborator.

My question is: what is the best way to persist changes to the checkbox (i.e. edit_access) to the database?

Do I add a v-on listener to the checkboxes that fires an ajax call to the server?

That’s how I would have handled it using jquery, but it feels imperative and not a very “vue.js” way of doing things.

Solution :

Yes, you’re right. You can add <input type=’checkbox’ v-model=’collaborator.edit_access’ @change=”method_to_call(item_id)”>

Then in method method_to_call(item_id) make ajax request (I recommend to use axios with Vue.js) and update the value on the server in the database.

Example

<ul v-for=’(collaborator,index) in collaborators’ :key=’collaborator.id’>
<li>
@{ collaborator.email }
<input type=’checkbox’ v-model=’collaborator.edit_access’ @change=”method_to_call(index)”>
</li>
</ul>

Then in methods

methods:{
method_to_call(index){
let collaborator = this.collaborators[index];
// you have collaborator id, edit_access, e.t.c.
// send data to server and update in the database
}
…….
}

[Vue.js] vue-router url can't find when its revisite/reload in laravel project Subscribe to RSS

When i re hit the vue-router url its return 404 page not found.

I running it on laravel 5.8. in web.php file

I tried some of these but they don’t work

Route::get(‘/{capture_all?}’, ‘HomeController@index’)->where(‘capture_all’, ‘[\/\w\.-]‘);

Route::get(‘/{vue_capture?}’, ‘HomeController@index’)->where(‘vue_capture’, ‘[\/\w\.-]‘);

Route::get(‘/{any}’, ‘HomeController@index’)->where(‘any’, ‘[\/\w\.-]‘);

the page will refreshed

Solution :

Consider a fallback route:

Route::fallback(‘HomeController@index’);

Any unknown route will be passed to this fallback route. Any known routes (like to the APIs) will remain untouched.

[Vue.js] Vue.js component custom non-reactive properties safe name Subscribe to RSS

What is a safe naming for custom properties for component instance?
What is the recommended way to store component-specific but non-reactive data?

some reasoning:

While working with Vue.js, from time to time end up in a situation which I need to store some static data within the component instance. As far as I understand Vue, a component instance can be considered as a plain object with some special attributes (this.$data, .$el, .$parent, etc.). That tells me that I can do whatever with the object, only be aware not collide with internally used attribute names.

A common example of this is a Web Component Element that holds some other logic or even shadow DOM (e.g. Canvas for WebGl) and the reference is bound to the vue.js component, meaning there’s some init logic and dispose logic bound to component’s lifecycle. The reference here can be a proxy object, not necessarily the DOM element itself. I usually store it in the component as a direct property with “_“ prefix:

<template>
<my-custom-canvas @ready=”canvasReady”>
</template>
<script>
export default {
methods: {
canvasReady (canvas) { this._my_custom_canvas = canvas; }
}
}
</script>

so ad 1. is it “ok-ish” and “safe” to pollute the component instance like this? Or should I put this into the this.$data, making it reactive data though? And ad 2. ultimately, I can’t find any good guides on how to work with non-reactive data in Vue. There are cases where it feels like it should be contained in the component itself, not somewhere outside in global space. Also, is it just plain wrong or is it an edge case where there are no conventions? Could anybody give me some arguments why I should avoid custom non-reactive attributes?

Solution :

When I need to store non-reactive data, such as consts or enums, I just put it into the data object outside of the data function, and into the created lifecycle method.

When you define a variable on data outside of the data function, they are not going to be reactive.

for example, this would initialize it as a null value, and make it available in the template if needed, but if it changes, it won’t initiate a refresh.

<template>
<my-custom-canvas @ready=”canvasReady”>
</template>
<script>
export default {
methods: {
canvasReady (canvas) { this.data.myCanvas = canvas; }
},
created() {
this.data.myCanvas = null;
}
}
</script>

If you’re not planning on using it inside the template though, you can just put it outside the component.

<template>
<my-custom-canvas @ready=”canvasReady”>
</template>
<script>
const myCanvas = null;
export default {
methods: {
canvasReady (canvas) { myCanvas = canvas; }
},
}
</script>

Solution 2:

I wouldn’t necessarily call it a duplicate but you may find the answers to this question relevant:

How to set a component non-reactive data in vue.js 2?

This topic has also been discussed by the vue.js core team:

https://github.com/vuejs/vue/issues/1988

The short answer is there’s nothing wrong with adding non-reactive data directly to this.

vue.js uses _ and $ prefixes for its own internal properties (see here https://vuejs.org/v2/api/#data) so you may find that avoiding those prefixes is actually safer. From a name collision perspective it’s really no different to when you’re naming the props, data properties etc. as they also get exposed through properties of this. Private properties of mixins, etc. have their own convention, outlined in https://vuejs.org/v2/style-guide/#Private-property-names-essential. If nothing else I recommend reading the Detailed Explanation section as that further discusses Vue’s own naming conventions.

On a somewhat related note, if you freeze an object using Object.freeze then vue.js won’t attempt to make it reactive. This isn’t really relevant to the case where the object is an HTML element but if you’re just trying to keep large, static data away from the reactivity system then this can be an easier way.

[Vue.js] Object prototype may only be an Object or null undefined Subscribe to RSS

While trying to create a codesandbox to reproduce a bug, I faced another problem.

Here is my codesandbox:
https://codesandbox.io/s/vue-typescript-example-o7xsv

The error is:

Object prototype may only be an Object or null: undefined

Is seems to be related to class extension. HelloWorld class is extending Vue, and vue.js is imported:

<template>
<div>
<h1>{ msg }</h1>
</div>
</template>

<script lang=”ts”>
import vue.js from “vue”;
import Component from “vue-class-component”;

@Component
export default class HelloWorld extends vue.js {
msg = “HelloWorld”;
}
</script>

Console error :

Compiled version:

I already saw this thread, but didn’t help:
TypeError in Typescript

Solution :

The problem is specific to currently used Vue+TypeScript template. The template doesn’t make use of synthetic default exports and requires to import vue.js as

import * as vue.js from “vue”;

instead of

import vue.js from “vue”;

The setup seems to be using Babel for transpilation and TypeScript for type checking.

Regular modules are broken as well, they are exported as default exports:

export default Vue.component({

But in order to work, they should be imported as *:

import * as HelloWorld from “./components/HelloWorld”;

Another problem is how vue-class-component and @Component decorator are used. As a rule of thumb, TypeScript/ES.Next decorators are expected to be factories. This makes the use of decorators consistent because they may or may not accept arguments. This also mitigates a problem when a decorator is accidentally not called when it should. It should be used as:

@Component()
export default class HelloWorld extends vue.js {…}