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>
Related
I have a case where a Vue 2 component isn't rendering when I update its data:
Vue.component('framer-deal', {
data: function(name,src) {
return {
name : "Image1",
src : "https://via.placeholder.com/250"
}
},
created: function () {
eventHub.$on('clickedImage', this.updateimage)
},
methods:{
updateimage : function(imgsrc) {
this.src = imgsrc;
this.name = imgsrc;
console.log("thumbnail", this.$data.name)
}
},
template: '<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="this.src" /></div>'
})
JS Bin example: https://jsbin.com/wokiqozipa/edit?js,output
(I'm using an eventhub to trigger a method on the component, but this shouldn't be why the rendering is not triggered.)
Problem is you have 2 Vue instances in your example:
var vm = new Vue({
el: '#app',
data: {
json: mydata
},
methods: {
open: function(e){
imageframe = e.target.src;
eventHub.$emit('clickedImage', imageframe)
}
}
});
new Vue({ el: '#frame' }) // remove this to make it work
Remove new Vue({ el: '#frame' }) to make it work...
Also do not use this in the template.
Change
<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="this.src" /></div>
to
<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="src" /></div>
How can I make the following code work with Vue.js?
Google
where company is google.
data: {
company: "google"
}
const app = new Vue({
el: '#app',
data() {
return {
company: 'google'
};
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
<div id="app">
<a :href="`http://${company}.com`">Google</a>
</div>
i want to reserve paragraph after click button
reserve paragraph is showing in second paragraph
for my case is i have to use template ?
here is my code
<div id="example">
<p>Original Message: "{{ message }}"</p>
<p id="pReserve"></p>
<button #click="reserve">Reserve</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script>
Vue.component('coba',{
});
var vm = new Vue({
el: '#example',
data: {
message: 'Hai'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` mengarah ke instance vm
return this.message .split('').reverse().join('')
}
},
methods: {
reserve:{
}
},
})
</script>
Here is the solution.
var vm = new Vue({
el: '#example',
data: {
message: 'Hai'
},
methods: {
reversedMessage: function() {
this.message = this.message.split('').reverse().join('');
}
},
});
<div id="example">
<p>Original Message: "{{ message }}"</p>
<p id="pReserve"></p>
<button #click="reversedMessage">Reserve</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
I have the following structure and I want to include the container only if the website setting is not fullWidth.
For the moment, if I set the fullWidth=false, I am unable to see the HelloWorld component, but I want to see it, only not within a container.
<v-content>
<v-container v-if="!layoutIsFullWidth()">
<HelloWorld/>
</v-container>
</v-content>
I know this is a stupid question, but I've tried everything, and didn't find a situation similar to it, or I didn't knew what to search.
Thank you!
As I said, use CSS for showing/hiding content depending on the window width.
However, if you want a JS/Vue solution, then remove the braces, as it says in your console:
[Vue warn]: Error in render: "TypeError: layoutIsFullWidth is not a function"
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
settings: {
layout: {
darkTheme: false,
fullWidth: false
}
},
leftDrawer: {
activated: true,
opened: false
}
},
methods: {
hasLeftDrawer() {
return this.leftDrawer.activated;
},
layoutIsFullWidth() {
return this.settings.layout.fullWidth;
},
layoutIsDarkTheme() {
return this.settings.layout.darkTheme;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-if="!layoutIsFullWidth">{{ message }}</p>
</div>
Also, better use a computed property for this purpose:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
settings: {
layout: {
darkTheme: false,
fullWidth: false
}
},
leftDrawer: {
activated: true,
opened: false
}
},
computed: {
hasLeftDrawer() {
return this.leftDrawer.activated;
},
layoutIsFullWidth() {
return this.settings.layout.fullWidth;
},
layoutIsDarkTheme() {
return this.settings.layout.darkTheme;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-if="!layoutIsFullWidth">{{ message }}</p>
</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 :)