the question I have might be hard to understand, so please help me re-organize the question if you can see the better way to put it in.
So, I am building a registration platform.
(1) First, I receive an array of objects of cases the user can sign time to.
(2) Each object consists of 2 properties, "name", "description".
(3) I store the array in the data, end use it in the element provided by a picker called "vue-multiselect", which basically accepts the array and loops over the objects and displays them.
(4) As you can see, it displays both properties and values, which I am trying to avoid. My question is, is it possible to pass only the "name" value into the picker, and display the description value when hovering the first value?
You can find this use case documentation here: https://vue-multiselect.js.org/#sub-custom-option-template
<multiselect v-model="value"
deselect-label=""
select-label=""
placeholder=""
selected-label=""
:show-pointer="true"
:options="projectCases">
<template slot="option" slot-scope="{ option }">
<strong :title="option.description">{{ option.name }}</strong>
</template>
</multiselect>
ps: I use title attribute to implement display-on-hover functionality. you can use any other tooltip library as well.
I have a component and am using a v-for loop to loop through and object array at the $root level of my app to populate a list.
In other components in my app I'll EventBus.$emit data to update tables in my database. That means the $root array data updates.
Is there a way to bind or map the v-for list I created to detect and update using the index or another method?
Here is the example loop and example $root data.
I guess I'm hoping there's a way to connect an object in an array by using [index]
<v-list-item-content v-if="this.$root.people">
<div v-for="(item, index) in this.$root.people" :key="item.id">
<div>
<span v-html="this.$root.people[index].value"></span>
</div>
</div>
</v-list-item-content>
My array looks like this.
people:Array[2]
0:Object
event_id:6
submission_values:Array[4]
0:Object
value:"Danny"
1:Object
2:Object
3:Object
I suppose if people is already reactive then you should look at how you update this array. There are some caveats about updating a reactive array in VueJS, please take a look at the official documentation
How would one go about applying a VueJS filter (i.e. {{ price | currency }}) to data displayed using vue-tables-2?
I tried playing around with slots with one of the demo tables to no avail: https://jsfiddle.net/jfa5t4sm/11/
This is a bit annoying, as 'custom filters' mean different things in different context, so searching the docs is not bearing fruit.
Anyone have ideas?
Since it's a scoped slot you have to access the value through the props object and give it the correct slot name.
<template slot="price" scope="props">
<div>
<p>{{ props.row.price | currency }}</p>
</div>
</template>
Working JsFiddle
How should one refer to the value set up within an object passed to v-bind to display it?
Example:
<p v-bind="{id: 'myId'}">{{ /*what to state here to have 'myId' displayed?*/ }}</p>
The <p> is not a child component, everything here is all in the same scope. You cannot refer to its attributes from its contents. As in Bert's example, you simply have to put what you want in both places.
If you want to use a variable for the id and for the contents, you can do that, but you have to explicitly put it in both places:
<p :id="myIdVariable">{{myIdVariable}}</p>
I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why.
Can someone give me a simple explanation about the difference between these two and when it's better use each one?
From here -
Remember:
<input v-model="something">
is essentially the same as:
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
or (shorthand syntax):
<input
:value="something"
#input="something = $event.target.value"
>
So v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup and v-on:input to update the js value. The js value must be present in your data, or in an inject.
Use v-model when you can. Use v-bind/v-on when you must :-) I hope your answer was accepted.
v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
v-model has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input will fire much more frequently.
v-model also has modifiers .lazy, .trim, .number, covered in the doc.
In simple words
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa.
but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
check out this simple example: https://jsfiddle.net/gs0kphvc/
v-model
it is two way data binding, it is used to bind html input element when you change input value then bounded data will be change.
v-model is used only for HTML input elements
ex: <input type="text" v-model="name" >
v-bind
it is one way data binding,means you can only bind data to input element but can't change bounded data changing input element.
v-bind is used to bind html attribute
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. But v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
v-model is intended to be used with form elements. It allows you to tie the form element (e.g. a text input) with the data object in your Vue instance.
Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/
v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change
Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/
Hope this helps you with basic understanding.
There are cases where you don't want to use v-model. If you have two inputs, and each depend on each other, you might have circular referential issues. Common use cases is if you're building an accounting calculator.
In these cases, it's not a good idea to use either watchers or computed properties.
Instead, take your v-model and split it as above answer indicates
<input
:value="something"
#input="something = $event.target.value"
>
In practice, if you are decoupling your logic this way, you'll probably be calling a method.
This is what it would look like in a real world scenario:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input :value="extendedCost" #input="_onInputExtendedCost" />
<p> {{ extendedCost }}
</div>
<script>
var app = new Vue({
el: "#app",
data: function(){
return {
extendedCost: 0,
}
},
methods: {
_onInputExtendedCost: function($event) {
this.extendedCost = parseInt($event.target.value);
// Go update other inputs here
}
}
});
</script>