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 :)
Related
Gets data from collection:
const pageTitles = {
homePage: 'Main'
...
}
export default pageTitles
If I make all this way:
<div><span>{{pageTitles.homePage}}</span></div>
everything is ok.
But i need to show the value depending on route. I tried to make this:
pageTitle(){
if (this.$route.path === '/'){
return pageTitles.homePage
}
}
and in div I have {{pageTitle}}, but it doesn't work. Why it doesn't work?
you've omitted the this keyword before pageTitles.homePage in your computed property
pageTitle(){
if (this.$route.path === '/'){
return this.pageTitles.homePage
}
}
It should work, Here you go :
new Vue({
el: '#app',
data: {
pageTitles: {
homePage: 'Main'
}
},
computed: {
pageTitle() {
return this.pageTitles.homePage
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>{{ pageTitle }}</h2>
</div>
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>
This is my obj form backend
myObj = {
name:'nr123',
empty:''
}
On click function adds new key: value
function userClick(){
this.myObj.status= "accept";
console.log(this.myObj)
}
clg returns
myObj = {
name:'nr123',
empty:'',
satus:'accept'
}
but when i try to display it
<v-text>
Acceptation status {{ myObj.status }}
</v-text>
it won't work.
And this is iteresting when i use "epty" (alredy declared key) to carry 'accept' every thing works fine
so how to show acceptation status when it was added in a midle of the process?
(myObj is one of dinamicly created objects kept in array. Each of myObj's can assume diferent acceptation status)
You can use computed property.
Demo :
new Vue({
el: '#app',
data() {
return {
myObj: {
name:'nr123',
empty:''
}
}
},
computed: {
newObj: function() {
this.myObj.status = 'accept';
return this.myObj;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-text="newObj.status"></p>
</div>
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'm somewhat new to Vue and I'm trying to figure out how to access computed values from components' computed values.
Please check out this Fiddle: https://jsfiddle.net/85ma3rct/
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<floor></floor>
<floor></floor>
<floor></floor>
</table>
Largest area: {{ largest_area}}
</div>
Vue.component('floor', {
data: function () {
return {
width: 20,
height: 20
}
},
computed: {
area: function () {
return this.width * this.height;
}
},
template: '<tr><td><input type="number" v-model="width"></td>' +
'<td><input type="number" v-model="height"></td>' +
'<td>{{ area }}</td>' +
'</tr>'
})
new Vue({
el: '#app',
computed: {
largest_area: function () {
// How to get this from component computed values...
return 0
}
},
})
How could I get the largest_area computed value by the computed value from within a number of components?
One possible solution is watching for area value changes in child component and emit value to parent
watch: {
area: {
handler() {
this.$emit('input', this.area)
},
immediate: true
}
},
then in parent
<table>
<floor #input="changeVal($event, 0)"></floor>
<floor #input="changeVal($event, 1)"></floor>
<floor #input="changeVal($event, 2)"></floor>
</table>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
areas: [0, 0, 0]
},
computed: {
largest_area: function () {
return Math.max(...this.areas)
}
},
methods: {
changeVal(val, index) {
this.$set(this.areas, index, val)
}
}
})
Demo here https://jsfiddle.net/ittus/kuo9crjm/1/
You can use $refs for this Refer - Refs
Add a ref to your component wherever you import it and use it -
<MyComponent ref="child" />
Then you can access all it's property from your consuming component.
In your consuming component you can access it in $refs property like below
this.$refs.child.{child-property}
Add ref to floor
<table>
<floor ref="floor"></floor>
</table>
And then refer it
new Vue({
el: '#app',
computed: {
largest_area: function () {
console.log(this.$refs.floor.area())
return 0
}
},
})
You can turn your <floor> components into custom elements that can use v-model. Each <floor> can then emit the computed area to its parent which can collect and compute the maximum.
For example
Vue.component('floor', {
template: `<tr>
<td><input type="number" v-model="width" #input="update"></td>
<td><input type="number" v-model="height" #input="update"></td>
<td>{{ area }}</td>
</tr>`,
data: () => ({ width: 20, height: 20 }),
computed: {
area() { return this.width * this.height }
},
methods: {
update() { this.$emit('input', this.area) }
},
created() { this.update() } // emit the initial value
})
new Vue({
el: '#app',
data: { areas: [0, 0, 0] },
computed: {
largest_area () { return Math.max(...this.areas) }
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<div id="app">
<table>
<floor v-for="(_, n) in areas" v-model="areas[n]" :key="n"></floor>
</table>
Largest area: {{ largest_area }}
</div>
Typically, to support v-model, your component would have a value prop. However, since your components initialise their own data, I have omitted that. The only real requirement is that your component emit an input event.