In my Laravel 5.8 / vuejs 2.6 app with "vue-select": "^2.6.4" I
set action when option is selected, but I have 2 problems with it:
1) Looks like Action is triggered on page opened
2) When I select option Action is triggered twice.
3) I tried to set .prevent :
<v-select
v-model="selection_forum_post_action"
:options="forumPostActionValueArray"
id="forum_post_action"
name="forum_post_action"
class="form-control editable_field"
placeholder="Select action"
#change.prevent="forumPostActionSelected(nextThreadPost.id, nextThreadPost.body, nextThreadPost.creator_name)"
></v-select>
But got console error :
app.js?dt=1571398092:134128 [Vue warn]: Error in v-on handler: "TypeError: $event.preventDefault is not a function"
I tried several variants and failed with all.
Please working example...
I found #input working good for me :
<v-select
v-model="selection_forum_post_action"
:options="forumPostActionValueArray"
id="forum_post_action"
name="forum_post_action"
class="form-control editable_field"
placeholder="Select action"
#input="forumPostActionSelected(nextThreadPost.id, nextThreadPost.body, nextThreadPost.creator_name)"
></v-select>
Related
I am trying to run test integration in Vue app
and I am importing component in components.test.js but it gives an Unexpected token error
components.test.js
import flushPromises from "flush-promises";
import {Selector} from "testcafe";
import sample_vue from "../src/components/sample-vue.vue";
anyone can suggest?
update : if I use v-bind:class="" then I am facing new error
I think you should add v-bind:
v-bind:class="{ error: !nameValidation }"
What you just wrote is supported in Nuxt js.
To use loop in Vue.js, you should probably do this:
<label v-for="(item, i) in option.item" :key="i">{{ item }}</label> // Or whatever you wanna use
It may not work because I do not know the typeof option.item or what it contains
I am using Vue js Quasar framework, I am encountering a problem when I add this html 5 element
<audio name="test" ref="player" id="player" controls>
<source v-bind:src="track">
Your browser does not support the audio element.
</audio>
I suddenly encounter this error
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '1' is not a valid attribute name."
DOMException: Failed to execute 'setAttribute' on 'Element': '1' is not a valid attribute name.
Can someone point me in the right direction what I am doing wrong?
What is the value of "track" ?
Chrome is warning me that I have: "Added a non-passive event listener to a scroll-blocking 'mousewheel' event".
I want that warning to go away. I'm using Vue js 2.5.13 and according to the documentation, you can use <div v-on:scroll.passive="onScroll">...</div> to make events passive. However, I cannot figure it out for a mousewheel event.
Here is my code:
<select v-model='selectWatcher'>
<option v-for="option in myOptions" v-bind:value="option.id">{{option.name}}</option>
</select>
If it helps, selectWatcher, is a function within my vue instance's watch section.
I have tried:
<select v-model='selectWatcher' v-on:mousewheel.passive>
<select v-model='selectWatcher' v-on:mousewheel.passive="true">
<select v-model='selectWatcher' v-on:scroll.passive="mousewheel">
None of this works, and I still get the warning. What am I doing wrong? Do I need to mark the selectWatcher as passive somehow?
Since you're not creating a mousewheel event, you won't be able to modify the event it's complaining about. There's no way to say "make all mousewheel events passive".
I am trying to upload a file in my form using the bootstrap-vue form file component
template
<b-form-group id="userInputGroup8" label="User Picture:">
<b-form-file id="userPictureInput" ref="fileinput" #input="userPictureSelected" v-model="userPictureFile" choose-label="Select" accept=".jpg, .png"></b-form-file>
<br> Selected file : {{ userPictureFile.name }}
</b-form-group>
Once the file is selected , the name is displayed in the browser, but it does not appear in the input field, and even if the userPictureSelected method is fired, I don't get its value in the console
script
data () {
return {
...
userPictureFile: '',
}
},
methods: _.extend({}, mapActions(['createUser']), {
userPictureSelected: () => {
console.log('Selected: ', this.userPictureFile.name)
}
}
I get the error
[Vue warn]: Error in event handler for "input": "TypeError: _this2.userPictureFile is undefined"
What could be wrong ? where can I get a good and recent example for uploading such file into my server backend static files directory ?
thanks for update
seems to be an issue not yet solved with bootstrap-vue
Custom input file after choice file nothing change.
I'm using vue#2.1.3 and the vue official webpack template to build an app.
When developing locally, I often see the warning Uncaught TypeError: Cannot read property ... of undefined, but the HTML can be rendered successfully. However, the HTML can't be rendered when it's deployed to Netlify with npm run build command. So I have to treat this warning seriously.
I learned from here that it's because "the data is not complete when the component is rendered, but e.g. loaded from an API." and the solution is to "use v-if to render that part of the template only once the data has been loaded."
There are two questions:
I tried wrap v-if around multiple statements that's generating the warning but personal I think this solution is verbose. Is there a neat approach?
"warnings" in local development turn into "fatal errors"(HTML can't be rendered) in production. How to make them the same? e.g. both of them issue warnings or errors?
Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one.
So instead of something like:
<div>
<h1 v-if="foo.title">{{ foo.title }}</h1>
<p v-if="foo.description">{{ foo.description }}</p>
</div>
Do
<div>
<template v-if="foo">
<h1>{{ foo.title }}</h1>
<p>{{ foo.description }}</p>
</template>
</div>
have you tried to initialize all the data you need? e.g. if you need a b c, you can do:
new Vue({
data: {
a: 1,
b: '',
c: {}
},
created(){
// send a request to get result, and assign the value to a, b, c here
}
})
In this way you wont get any xx is undefined error
Guys are right but I can add something.
If there is possibility that your root element in the condition can be undefined for some reason, it is good practice to use something like that: v-if='rootElement && rootElement.prop'. It will secure you from getting cannot get property prop of undefined as when rootelement is undefined, it will not go further in checking.
2021 vue3
we can use like this
props: {
form: {
type: String,
required: true,
},
setup(props, context) {
console.log(props.form)