I've got a list of text input-fields created through a v-for with a v-model to an array. I want to add elements to the array, and thus creating another input-field.
So far all works. The problem is that the new input-fields are somehow all assigned the same index (?) or something else is happening to cause them to display the same value.
I've made this jsfiddle to showcase what I mean. If you press the button twice and then try to edit one of the new input-boxes, then all the new input-boxes will get the edited value. I'd want only the edited input-box to show the input value.
I guess there is something I am overlooking here. Is there anyone who can help with this please?
Javascript:
new Vue({
el: '#app',
data: {
items: [{name: "one", id: 0}],
template: {
name: "two",
id: 2,
},
},
methods: {
addRow: function(){
this.items.push(this.template);
this.items[this.items.length - 1].id = Math.random();
}
}
})
HTML:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item,index) in items" :key="item.id">
<input v-model="item.name">
</div>
<button v-on:click="addRow">
Add row
</button>
<div>Array content: {{items}}</div>
</div>
Usage:
screenshot of what i'm getting
The problem here is that with array.push(declaredObject) you are adding a reference of template so every change will be reflected in all its references.
You must add a new object with the same properties, you can achieve that in many ways, the more common is Object.assign({}, this.template) and the newest one is Destructuring objects {...this.template}. so in your case It should be this.items.push({...this.template})
try
this.items.push({
name: "two",
id: 2,
});
instead of this.items.push(this.template) because template property is reactive and it will affect other properties that use it
check this fiddle
Related
I'm writing a function to update a custom checkbox when clicked (and I don't want to use native checkbox for some reasons).
The code for checkbox is
<div class="tick-box" :class="{ tick: isTicked }" #click="() => isTicked = !isTicked"></div>
which works find.
However, there are so many checkboxes, so I use object to keep track for each item. It looks like this
<!-- (inside v-for) -->
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" #click="() => {
isTicked['lyr'+layer.lyr_id] = !isTicked['lyr'+layer.lyr_id]
}"></div>
Now nothing happens, no error at all.
When I want to see isTicked value with {{ isTicked }}, it's just shows {}.
This is what I define in the <script></script> part.
export default {
data() {
return {
isTicked: {},
...
};
},
...
}
Could you help me where I get it wrong?
Thanks!
Edit:
I know that declaring as isTicked: {}, the first few clicks won't do anything because its proerty is undefined. However, it should be defined by the first/second click not something like this.
Objects does not reflect the changes when updated like this.
You should use $set to set object properties in order to make them reactive.
Try as below
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" #click="onChecked"></div>
Add below method:
onChecked() {
this.$set(this.isTicked,'lyr'+this.layer.lyr_id, !this.isTicked['lyr'+this.layer.lyr_id])
}
VueJS watches data by reference so to update object in state you need create new one.
onChecked(lyr_id) {
const key = 'lyr'+lyr_id;
this.isTicked = {...this.isTicked, [key]: !this.isTicked[key]};
}
With Vue.js, I'm showing the list of items with a checkbox. Clicking on Checkbox will move the item down with strike-through. The issue is, when I click on the checkbox, the wrong checkbox is checked.
For eg, when I click on Apple checkbox, orange checkbox is checked.
Fiddle: https://jsfiddle.net/d6encxe1/
Here's my code,
var myApp = new Vue({
el: '#myApp',
data: {
lists: [
{title: 'Apple', isChecked: false},
{title: 'Orange', isChecked: false},
{title: 'Grapes', isChecked: false}
]
},
computed: {
filterLists: function(){
return _.orderBy(this.lists, ['isChecked', false]);
}
},
methods: {
completeTask: function(e, i){
e.preventDefault();
this.lists[i].isChecked = !this.lists[i].isChecked;
}
}
})
.completed{
text-decoration: line-through;
color: red;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<div id="myApp">
<ul>
<li v-for="(list, index) in filterLists">
<input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />
<span class="title" v-bind:class="{completed: list.isChecked}">{{list.title}}</span>
</li>
</ul>
</div>
Use a key. A key uniquely identifies an element in Vue. If you do not use a key, Vue will try to re-use existing elements for performance.
To give Vue a hint so that it can track each node’s identity, and thus
reuse and reorder existing elements, you need to provide a unique key
attribute for each item. An ideal value for key would be the unique id
of each item.
You should always use a key when rendering list. Here I'm using the title of your list items, but ideally you should generate a unique key.
<li v-for="(list, index) in filterLists" :key="list.title">
Also you do not need to pass indexes around. Just pass the item itself.
v-on:change="completeTask(list)"
And in completeTask, check it off.
completeTask: function(task){
task.isChecked = !task.isChecked
}
Finally, iterate over your li element and not your ul element.
Updated fiddle.
The index screws things up, you can fix it by binding the checked state
<input type="checkbox" v-bind:checked="list.isChecked" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />
And changing the complete task to just pass the item in:
<input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask(list)" v-bind:checked="list.isChecked" />
See fiddle:
https://jsfiddle.net/d6encxe1/3/
You should remove the 'id' or use something other than the index of the loop because when you re-order the index doesn't change.
You probably want to put v-for in <li> instead of <ul>, or your will get several <ul> elements.
And you didn't provide a key. You should provide a unique key for the items. For example, if the title is unique, you can use it as the key, or you may need to add another attribute like id.
Besides, you can pass the entire list item to the method instead of just the index, because the indexes are changeable in your case:
v-on:change="completeTask($event, list)"
Working example here: https://jsfiddle.net/0r2yb0z6/1/
I want to get the innerText of an item in a rendered list, but accessing it using this.$refs doesn't seem to work. I've also tried to use v-modal and that doesn't seem to work either.
Here's my code:
<div id="simple" v-cloak>
<h1>Clicked word value!</h1>
<ul>
<li v-for="word in wordsList" #click="cw_value" ref="refWord">
{{ word }}
</li>
<h4> {{ clickedWord }} </h4>
</ul>
</div>
var app = new Vue({
el: '#simple',
data: {
clickedWord: '',
wordsList: ['word 1', 'word 2', 'word 3']
},
methods: {
cw_value: function() {
this.clickedWord = this.$refs.refWord.innerText
// "I don't know how to get inner text from a clicked value"
}
}
})
Since you've used ref="refWord" on the same element as a v-for, this.$refs.refWord is an array containing each DOM element rendered by v-for.
You should reference the index of each word, and then pass that to the click handler:
<li v-for="word, index in wordsList" #click="cw_value(index)" ref="refWord">
Then, in your cw_value method, use the index value to access the correct element in the array:
cw_value: function(index) {
this.clickedWord = this.$refs.refWord[index].innerText;
}
Here's a working fiddle.
Alternatively, it would be much simpler to just set the clicked word inline in the click handler:
<li v-for="word in wordsList" #click="clickedWord = word">
Here's a working fiddle for that too.
Since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.) Here is MDN document on that.
Now it is:
this.$refs.refWord[index].textContent
I'm using Vue.Js for a survey, which is basically the main part and the purpose of the app. I have problem with the navigation. My prev button doesn't work and next keeps going in circles instead of only going forward to the next question. What I'm trying to accomplish is just to have only one question visible at a time and navigate through them in correct order using next and prev buttons and store the values of each input which I'll later use to calculate the output that will be on the result page, after the survey has been concluded. I've uploaded on fiddle a short sample of my code with only two questions just to showcase the problem. https://jsfiddle.net/cgrwe0u8/
new Vue({
el: '#quizz',
data: {
question1: 'How old are you?',
question2: 'How many times do you workout per week?',
show: true,
answer13: null,
answer10: null
}
})
document.querySelector('#answer13').getAttribute('value');
document.querySelector('#answer10').getAttribute('value');
HTML
<script src="https://unpkg.com/vue"></script>
<div id="quizz" class="question">
<h2 v-if=show>{{ question1 }}</h2>
<input v-if=show type="number" v-model="answer13">
<h2 v-if="!show">{{ question2 }}</h2>
<input v-if="!show" type="number" v-model="answer10">
<br>
<div class='button' id='next'>Next</div>
<div class='button' id='prev'>Prev
</div>
</div>
Thanks in advance!
You should look at making a Vue component that is for a survey question that way you can easily create multiple different questions.
Vue.component('survey-question', {
template: `<div><h2>{{question.text}}</h2><input type="number" v-model="question.answer" /></div>`,
props: ['question']
});
I've updated your code and implemented the next functionality so that you can try and create the prev functionality. Of course you should clean this up a little more. Maybe add a property on the question object so it can set what type the input should be. Stuff like that to make it more re-useable.
https://jsfiddle.net/9rsuwxvL/2/
If you ever have more than 1 of something, try to use an array, and process it with a loop. In this case you don't need a loop, but it's something to remember.
Since you only need to render one question at a time, just use a computed property to find the current question, based on some index. This index will be increased/decreased by the next/previous buttons.
With the code in this format, if you need to add a question, all you have to do is add it to the array.
https://jsfiddle.net/cgrwe0u8/1/
new Vue({
el: '#quizz',
data: {
questions:[
{question:'How old are you?', answer: ''},
{question:'How many times do you workout per week?', answer: ''},
],
index:0
},
computed:{
currentQuestion(){
return this.questions[this.index]
}
},
methods:{
next(){
if(this.index + 1 == this.questions.length)
this.index = 0;
else
this.index++;
},
previous(){
if(this.index - 1 < 0)
this.index = this.questions.length - 1;
else
this.index--;
}
}
})
In a basic table structure, I want to be able to display a set of data from an array of objects one at a time. Clicking on a button or something similar would display the next object in the array.
The trick is, I don't want to use the visible tag and just hide the extra data.
simply you can just specify property that indicate the current element you want to display and index of that element inside your observableArray .. i have made simple demo check it out.
<div id="persons"> <span data-bind="text: selectedPerson().name"></span>
<br/>
<button data-bind="click: showNext" id="btnShowNext">Show Next</button>
<br/>
</div>
//here is the JS code
function ViewModel() {
people = ko.observableArray([{
name: "Bungle"
}, {
name: "George"
}, {
name: "Zippy"
}]);
showNext = function (person) {
selectedIndex(selectedIndex() + 1);
};
selectedIndex = ko.observable(0);
selectedPerson = ko.computed(function () {
return people()[selectedIndex()];
});
}
ko.applyBindings(new ViewModel());
kindly check this jsfiddle
Create observable property for a single object, then when clicking next just set that property to other object and UI will be updated.