I'm trying to have my vue file accept an array of objects from the parent and create a multiselect with it but the vue template keeps rendering before my variables can initialize so I get a message saying the array that the multiselect is using is equal to null
I have tried creating using a computed, mounted, and created, component to the file but nothing seems to work
<template>
<div id="my-app">
<multiselect v-model="value" :options="prop2" :custom-label="FullName" placeholder="Select one" label="name" track-by="_id" #update="updateProp1()"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
name: "comp",
components: {
Multiselect
},
props: ['prop1', 'prop2'],
data: function() {
return {
value: null,
}
},
created: function(){
this.getProp1();
},
computed: {
prop2() {
return this.prop2;
}
},
methods: {
FullName ({ FirstName, LastName }) {
return FirstName + " " + LastName
},
getProp1(){
for(var p2 in this.prop2){
if(this.prop1 == p2._id){
this.value = prop1;
break;
}
}
},
updateProp1(newProp1){
this.prop1 = newProp1;
}
}
}
</script>
I'm expecting a multiselect with default values in the "value" variable and the all the available options in the "options" variable. Selecting anything with the multiselect will overwrite the "value" variable. Though what I'm actually getting is two empty arrays that sometimes works. I think this is happening because vue is asynchronous but even knowing that I'm not sure how I can prevent it.
Related
I have a simple vue component where i defined a boolean constant in data with start value false. I now want to create a method to change it to true and bind certain stuff conditionally to that in the template when it changes. But somehow i get the error "property value does not exist on type...". when i move computed out of data i get "Property 'computed' has no initializer"
export default class Something extends Vue {
data() {
return {
value: false,
computed: {
valueTransform() {
this.value = true
alert(this.value)
},
},
}
}
}
This syntax is not valid in class components, you should have something like :
export default class Something extends Vue {
//data
value = false,
//computed
get valueTransform(){
return this.value
}
}
I feel like I am about to go down a path of extreme inefficiency when trying to keep data correctly mapped between a Parent and Child component.
If I have a simple Child Vue element like below
common/InputText.vue
<template>
<input v-bind:id="name" v-bind:value="value" v-on:input="changed($event, $event.target.value)">
</template>
<script>
props: ['name', 'value'],
methods: {
changed(event, value) { this.$emit('emitChanged', event, value); }
}
</script>
If I have a Parent Vue element like below, it is binding data to the Child elements. The problem is that it seems to be only binding from the Parent to the Child, the Parent data is not updating
Parent.vue
<input-text name="field01" v-bind:value="field01" #emitChanged="changed"></input-text>
<input-text name="field02" v-bind:value="field02" #emitChanged="changed"></input-text>
<script>
import inputText from "./common/InputText.vue";
export default {
data() {
return() {
field01: '',
field02: ''
}
},
components: {
input-text: inputText
},
changed(event, newValue) {
console.log(newValue);
}
}
</script>
I am able to update the Parent data with whatever the data the Child returns by changing the changed method to the below
changed(event, newValue) {
console.log(newValue);
if( event.target.id == 'field01' ) {
this.field01 = newValue;
}
if( event.target.id == 'field02' ) {
this.field02 = newValue;
}
}
This feels like a hack though and will become unmanageable should there be many input fields. What is the correct way to reupdate the Parent data?
This is why the v-model is useful, you can change your code in following way to overcome your problem without using v-model. but I would recommend try to implement v-model way.
<template>
<input v-bind:id="name" v-bind:value="value" v-on:input="changed($event, $event.target.value)">
</template>
<script>
props: ['name', 'value'],
methods: {
changed(event) { this.$emit('emitChanged', event); }
}
</script>
<input-text name="field01" v-bind:value="field01" #emitChanged="changed($event, 'field01')"></input-text>
<input-text name="field02" v-bind:value="field02" #emitChanged="changed($event, 'field02'"></input-text>
<script>
import inputText from "./common/InputText.vue";
export default {
data() {
return() {
field01: '',
field02: ''
}
},
components: {
input-text: inputText
},
changed(event, field) {
this[field] = event.target.value
}
}
</script>
I wanted to add some own scenarios for new components by forking vue-play.
I'm having problems in more complicated cases of vue-select, particularly Two-Way Value Syncing.
Going into this scenario ends up with warning:
vue.esm.js:571 [Vue warn]: Property or method "syncedVal" is not
defined on the instance but referenced during render.
and no option in the dropdown is preselected either. I'm failing to understand why I keep getting this warning, despite defining syncedVal in component's props.
I've added two files into vue-play/play:
VSelect.vue:
<template>
<v-select v-model="selected" :options="options"></v-select>
</template>
<script>
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect);
export default {
props: {
options: {
default: function() { return ['one', 'two'] },
type: Array
},
onchangeCallback: {
default: () => () => null
},
// doesn't seem to work:
syncedVal: {
default: 'one',
type: String
}
},
data() {
return {
selected: null
}
}
}
</script>
and VSelect.play.js:
import {play} from '../src/play'
import VSelect from './VSelect.vue'
play(VSelect)
.name('VSelect')
.displayName('VSelect')
.add('default', '<v-select />')
.add('multiple', '<v-select multiple />')
.add('custom options', `<v-select :options="['custom1','custom2']" />`)
.add('custom options with labels', `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`)
.add('2-way value sync', `<v-select :value.sync="syncedVal" />`) // doesn't seem to work
please note that the v-select component in VSelect.play.js is VSelect.vue
so there are some mistakes:
.add('multiple', '<v-select multiple />')
VSelect.vue do not have multiple props, so this multiple will not work as you expectd
FIX: add props to your component, and bind it to v-select
.add('2-way value sync', )
you define syncedVal in component's props, BUT you use it on other component (vue-play's component), they have different scope!
FIX: to use vue-play to demo this functionality, you need to write a full component, so you can have data to bind(see below for example code)
VSelect.vue do not implement sync (https://v2.vuejs.org/v2/guide/components.html#sync-Modifier), so nothing will happen here
I make an example from your component and play, I hope this will help you :)
Demo of my vue-play: https://vue-play-select.netlify.com/
Code: https://github.com/iampaul83/vue-play-select
here is how I fix them:
SelectFramework.vue:
<template>
<v-select
v-model="selected"
:options="options"
:multiple="multiple">
</v-select>
</template>
<script>
export default {
name: "SelectFramework",
props: {
options: {
default: () => ["Vue.js", "React", "Angular"],
type: Array
},
value: String, // to support v-model
foo: String, // to support :foo.sync
multiple: false // to support multiple select
},
data() {
return {
selected: this.value,
};
},
watch: {
selected () {
this.$emit('input', this.selected) // update v-model
this.$emit('update:foo', this.selected) // update foo.sync
},
value () {
this.selected = this.value // update from v-model
},
foo () {
this.selected = this.foo // update from foo.sync
}
}
};
</script>
play/index.js:
import { play } from 'vue-play'
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
import SelectFramework from '../src/SelectFramework.vue'
play(SelectFramework)
.name('SelectFramework')
.displayName('Select Framework')
.add('default', '<select-framework />')
.add('multiple', '<select-framework multiple />')
.add('custom options', `<select-framework :options="['custom1','custom2']" />`)
.add('custom options with labels', `<select-framework :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`)
// full component to demo v-model and :foo.sync
.add('v-model', {
data() {
return {
selected: null,
syncedVal: null
}
},
template: `
<div>
<p>selected: {{selected}} </p>
<p>syncedVal: {{syncedVal}} </p>
<select-framework
v-model="selected"
:foo.sync="syncedVal">
</select-framework>
<p>
<button #click="selected = 'Vue.js'">Set selected to Vue.js</button>
<button #click="syncedVal = 'React'">Set syncedVal to React</button>
</p>
</div>
`
})
// .add('2-way value sync', `<select-framework :value.sync="syncedVal" />`) // doesn't seem to work
Here is a simple Vue 2.0 form component. It consists of a number input and a button, e.g.:
Note that the value of the input is tied to the component's data using v-model. buttonText is passed in as a prop.
What's the best way to pass a default value into the form, so that it initially renders with a value other than 10?
Using props doesn't seem to be the right way to do it because then v-model no longer works properly.
However, data can't be passed in the way props can, as far as I can tell from Vue documentation.
.
<template>
<form v-on:submit.prevent="onSubmit">
<input v-model="amount" type="number" min="1" max="20"></input>
<button type="submit">{{ buttonText }}</button>
</form>
</template>
<script>
export default {
props: [ 'buttonText' ],
data: function() {
return {
amount: 10
}
},
methods: {
onSubmit: function() {
this.$emit("submit", parseInt(this.amount) );
}
}
}
</script>
You can pass in a prop (say initialAmount) and reference that when initializing the amount value in the data function:
export default {
props: {
buttonText: { type: String },
initialAmount: { type: Number, default: 10 },
},
data: function() {
return {
amount: this.initialAmount
}
},
methods: {
onSubmit: function() {
this.$emit("submit", parseInt(this.amount) );
}
}
}
I'm using Vue v1.0.28 and vue-resource to call my API and get the resource data. So I have a parent component, called Role, which has a child InputOptions. It has a foreach that iterates over the roles.
The big picture of all this is a list of items that can be selected, so the API can return items that are selected beforehand because the user saved/selected them time ago. The point is I can't fill selectedOptions of InputOptions. How could I get that information from parent component? Is that the way to do it, right?
I pasted here a chunk of my code, to try to show better picture of my problem:
role.vue
<template>
<div class="option-blocks">
<input-options
:options="roles"
:selected-options="selected"
:label-key-name.once="'name'"
:on-update="onUpdate"
v-ref:input-options
></input-options>
</div>
</template>
<script type="text/babel">
import InputOptions from 'components/input-options/default'
import Titles from 'steps/titles'
export default {
title: Titles.role,
components: { InputOptions },
methods: {
onUpdate(newSelectedOptions, oldSelectedOptions) {
this.selected = newSelectedOptions
}
},
data() {
return {
roles: [],
selected: [],
}
},
ready() {
this.$http.get('/ajax/roles').then((response) => {
this.roles = response.body
this.selected = this.roles.filter(role => role.checked)
})
}
}
</script>
InputOptions
<template>
<ul class="option-blocks centered">
<li class="option-block" :class="{ active: isSelected(option) }" v-for="option in options" #click="toggleSelect(option)">
<label>{{ option[labelKeyName] }}</label>
</li>
</ul>
</template>
<script type="text/babel">
import Props from 'components/input-options/mixins/props'
export default {
mixins: [ Props ],
computed: {
isSingleSelection() {
return 1 === this.max
}
},
methods: {
toggleSelect(option) {
//...
},
isSelected(option) {
return this.selectedOptions.includes(option)
}
},
data() {
return {}
},
ready() {
// I can't figure out how to do it
// I guess it's here where I need to get that information,
// resolved in a promise of the parent component
this.$watch('selectedOptions', this.onUpdate)
}
}
</script>
Props
export default {
props: {
options: {
required: true
},
labelKeyName: {
required: true
},
max: {},
min: {},
onUpdate: {
required: true
},
noneOptionLabel: {},
selectedOptions: {
type: Array
default: () => []
}
}
}
EDIT
I'm now getting this warning in the console:
[Vue warn]: Data field "selectedOptions" is already defined as a prop. To provide default value for a prop, use the "default" prop option; if you want to pass prop values to an instantiation call, use the "propsData" option. (found in component: <default-input-options>)
Are you using Vue.js version 2.0.3? If so, there is no ready function as specified in http://vuejs.org/api. You can do it in created hook of the component as follows:
// InputOptions component
// ...
data: function() {
return {
selectedOptions: []
}
},
created: function() {
this.$watch('selectedOptions', this.onUpdate)
}
In your InputOptions component, you have the following code:
this.$watch('selectedOptions', this.onUpdate)
But I am unable to see a onUpdate function defined in methods. Instead, it is defined in the parent component role. Can you insert a console.log("selectedOptions updated") to check if it is getting called as per your expectation? I think Vue.js expects methods to be present in the same component.
Alternatively in the above case, I think you are allowed to do this.$parent.onUpdate inside this.$watch(...) - something I have not tried but might work for you.
EDIT: some more thoughts
You may have few more issues - you are trying to observe an array - selectedOptions which is a risky strategy. Arrays don't change - they are like containers for list of objects. But the individual objects inside will change. Therefore your $watch might not trigger for selectedOptions.
Based on my experience with Vue.js till now, I have observed that array changes are registered when you add or delete an item, but not when you change a single object - something you need to verify on your own.
To work around this behaviour, you may have separate component (input-one-option) for each of your input options, in which it is easier to observe changes.
Finally, I found the bug. I wasn't binding the prop as kebab-case