I would like to get an array of the values of a Vue Object.
Object.values(obj) does not work as Vue translates object values to getters/setters: https://v2.vuejs.org/v2/guide/reactivity.html
It does work (see below). Since you are looking for the whole data object, you can get it by Object.values(this.$data):
new Vue({
el: '#app',
data: {
message: 'Open the console for a better view',
person: {
name: {first_name: 'Alice', surname: 'Smith'},
age: 15
}
},
methods: {
print() {
console.log(Object.values(this.person));
console.log(Object.values(this.person.name));
console.log(Object.values(this.$data));
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button #click="print">print</button>
</div>
Related
I have a basic ask. I am trying to get the data from the main area of my vue model to inside an object. I tried using app.$data.name i also tried this.name, but I cannot get it to work without error.
new Vue({
el: "#app",
data: {
name:"Bobby",
currentCard: {},
currentCard: {
author: this.name,
},
},
methods: {
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{currentCard.author}}
</div>
I think that is not possible, you could use a computed value.
new Vue({
el: "#app",
data() {
return {
name: "Bobby"
};
},
computed: {
currentCard() {
return {
author: this.name
};
}
},
methods: {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{currentCard.author}}
</div>
I tried to show particular string using v-text. But it shows nothing.
Tried code
ccc.handlebars
<div id="app">
<div class="input-group mb-3">
<input type="text" class="form-control" v-text="getValues[0].value">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
'bulk': {{{bulks}}}
},
computed: {
getValues: function() {
return this.bulk;
}
},
methods: {},
});
</script>
getValues retuens JSON
[
{ name: "Dauth", age: "18", value: "TGFR123" }
]
I want to show TGFR123 in the text box
Above getValues returns the correct JSON. But v-text="getValues[0].value" not shows the string. Help me to solve this.
v-text does not work on input.
If you want to set the value of an input use :value or v-model
var app = new Vue({
el: '#app',
data: {
bulk: [{
name: "Dauth",
age: "18",
value: "TGFR123"
}]
},
computed: {
getValues: function() {
return this.bulk;
}
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<div id="app">
Bind : <input type="text" :value="getValues[0].value">
v-model : <input type="text" v-model="getValues[0].value">
<div>Result : {{getValues[0].value}}</div>
</div>
With v-model the data will be changed with the user input
v-text
value binding
You can use v-model or v-bind:value to insert this value in your input
var app = new Vue({
el: '#app',
data: {
bulk: [{id: 123, name: "Test", value: "NerF21_346"}]
},
computed: {
getValues() {
return this.bulk[0].value
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="getValues">
</div>
v-model documentation
I get some text from API then I display it. But before I display it, I need to inject or replace some variable in the text to value from variable.
Please check this out to understand what I mean:
https://jsfiddle.net/0q4ot5sw/
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text }}
</div>
You can do that
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ text.replace("%variable%", variable) }}
</div>
or that
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject %variable%',
variable: 'some word' // How to inject this variable to the text?
},
computed: {
resultText: function() {
return this.text.replace("%variable%", this.variable);
}
}
})
and use like this
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{ resultText }}
</div>
You can use computed value to do the task
new Vue({
el: '#app',
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word123' // How to inject this variable to the text?
},
computed : {
changeText : function() {
return this.text + this.variable
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ changeText }}</p>
</div>
You can create a function (or a computed property, this decision is actually yours) and combine those two strings. Something like this
new Vue({
el: "#app",
data: {
text: 'Some very long text from API where I need to inject',
variable: 'some word'
},
methods: {
getText: function(){
return this.text + this.variable;
},
toggle: function(todo){
todo.done = !todo.done
}
}
})
On your template, you just call the function you created
<div id="app">
{{ getText() }}
</div>
I need to display key value from object. Here is my code:
new Vue({
el: '#app',
data: {
x: {"2018-05-11":{"may":4,"june":8,"april":5}}
}
})
In my template I would like to display: 2018-05-11, but not {"2018-05-11":{"may":4,"june":8,"april":5}}. How I can do it?
https://jsfiddle.net/grnok86b/
You can use computed and Object.keys for return key as value.
for example:
new Vue({
el: '#app',
data: {
x: {
"2018-05-11": {
"may": 4,
"june": 8,
"april": 5
}
}
},
computed: {
date() {
return Object.keys(this.x)[0];
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>My date is {{date}}</p>
</div>
you can loop it if you want
You can always create a computed method:
new Vue({
el: '#app',
data: {
x: {
"2018-05-11": {
"may": 4,
"june": 8,
"april": 5
}
}
},
computed: {
foo() {
return Object.keys(this.x)[0]
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ foo }}</p>
</div>
I have created a function even to do this procedure.
HTML
<p v-for="entidade in relato.entidade">${acessaEntidade(entidade)}</p>
The function in methods
JS
acessaEntidade: function (id) {
return this.entidades['nome' + id]
},
In the case I have a variable that is loaded and that variable there are indexes, 1, 2, 3 ... I get these indexes and consult in a new function to return the value by querying on another variable. If you need help, tell me by email :)
In the following example neither of the v-if related divs seem to get rendered before or after clicking the Add button. It seems like Vue.js isn't running any updates when the pizzas JSON object is updated.
Is there a solution to this problem without resorting to changing the pizzas variable into being an array?
<div id="app">
<div v-for="pizza in pizzas">
{{ pizza }}
</div>
<div v-if="totalPizzas === 0">
No pizza. :(
</div>
<div v-if="totalPizzas > 0">
Finally, some pizza! :D
</div>
<button #click="add">Add</button>
</div>
var app = new Vue({
el: '#app',
data: {
pizzas: {}
},
methods: {
add: function() {
this.pizzas['pepperoni'] = { size: 16, toppings: [ 'pepperoni', 'cheese' ] };
this.pizzas['meaty madness'] = { size: 14, toppings: [ 'meatballs', 'sausage', 'cajun chicken', 'pepperoni' ] };
},
totalPizzas: function() {
return Object.keys(this.pizzas).length;
}
}
});
There are several things to be improved in your code. Most of them are about syntax. For example, methods should be called, but computed properties can be queried directly: that's why it's #click="add()", but totalPizzas === 0 makes sense only if it's a computed property.
The crucial thing to understand, however, is how reactivity works in VueJS. See, while you change your object innards, adding new properties to it, this change is not detected by VueJS. Quoting the docs:
Vue does not allow dynamically adding new root-level reactive
properties to an already created instance. However, it’s possible to
add reactive properties to a nested object using the Vue.set(object, key, value) method:
Vue.set(vm.someObject, 'b', 2)
You can also use the vm.$set instance method, which is an alias to the
global Vue.set:
this.$set(this.someObject, 'b', 2)
Sometimes you may want to assign a number of properties to an existing
object, for example using Object.assign() or _.extend(). However, new
properties added to the object will not trigger changes. In such
cases, create a fresh object with properties from both the original
object and the mixin object:
// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
And this is how it might work:
var app = new Vue({
el: '#app',
data: {
pizzas: {}
},
computed: {
totalPizzas: function() {
return Object.keys(this.pizzas).length;
}
},
methods: {
add: function() {
this.pizzas = Object.assign({}, this.pizzas, {
pepperoni: { size: 16, toppings: [ 'pepperoni', 'cheese' ] },
['meaty madness']: { size: 14, toppings: [ 'meatballs', 'sausage', 'cajun chicken', 'pepperoni' ] }
});
},
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<div v-for="pizza in pizzas">
Size: {{ pizza.size }} inches
Toppings: {{ pizza.toppings.join(' and ') }}
</div>
<div v-if="totalPizzas === 0">
No pizza. :(
</div>
<div v-if="totalPizzas > 0">
Finally, some pizza! :D
</div>
<button #click="add()">Add</button>
</div>