# [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.

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 ?

### 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>

<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” >
</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>
</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>
</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:

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”;

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 {…}