I can pass a value from a main to my vue instance (another script) but won't work :(
<script>
let data = [{id:'1'}] //JUST SAMPLE
function pass_to_vue(data){
return data
}
</script>
<script>
var app = new Vue({
el: '#app',
data: {
external_value: pass_to_vue // HERE RECEIVE EXTERNAL VALUE
}
})
</script>
Thanks!
Please take a look at snippet below:
let ext = [{id:'1'}]
function pass_to_vue(data){
return data
}
document.querySelector('#ext').innerText = JSON.stringify(ext)
var app = new Vue({
el: '#demo',
data() {
return {
external_value: ''
}
},
mounted() {
this.external_value = pass_to_vue(ext)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
vue value
{{ external_value }}
<p>change id</p>
<input v-model="external_value[0].id" />
<hr />
</div>
<p>external value</p>
<p id="ext"></p>
Related
I want to get the values of "1999-00" (which is a part of stateStats data property) through a function xyz() defined in computed property but I am unable to do so.
Does anyone have some idea about it?
var app = new Vue({
el: "#app",
data(){
return {
stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
{"State":"Andhra Pradesh","1999-00":"27"},
{"State":"Arunachal Pradesh","1999-00":"9"}]
}
},
computed:{
xyz(){
return this.stateStats['1999-00']
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="x in xyz">
{{x}}
</div>
</div>
The computed property should be the same level as data.
var app = new Vue({
el: "#app",
data(){
return {/* whatever */}
},
computed : {
xyz(){
return this.stateStats.map( s => s['1999-00']);
}
}
});
You can use Array map function to get the desired property out of your array of objects.
var app = new Vue({
el: "#app",
data(){
return {
stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
{"State":"Andhra Pradesh","1999-00":"27"},
{"State":"Arunachal Pradesh","1999-00":"9"}]
}
},
computed:{
xyz(){
return this.stateStats.map(state => state["1999-00"]);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="x in xyz">
{{x}}
</div>
</div>
I am trying to mix Asp.netcore Razor Pages and Vue.js in a Project where The page modal returned will contain the data and the Vue controller will use that data to do the Clientside rendering and other UI interactions
Pagemodal.cs
public class SampleQuestionModel : PageModel
{
public List<QuestionViewModal> questionViewModals = new List<QuestionViewModal>();
public void OnGet()
{
MYEXAMAPI.Controllers.QuestionApiController questionApiController = new MYEXAMAPI.Controllers.QuestionApiController();
questionViewModals = questionApiController.GetQuestion();
}
}
This is my Razor where I uses the page modal to show data
#page
#model MYEXAM.SampleQuestionModel
#{
ViewData["Title"] = "SampleQuestion";
}
<h1>SampleQuestion</h1>
<script src="~/js/vue.js"></script>
<ul id="app">
<li v-for="item in questionViewModals">
{{ item.fullQuestions }}
</li>
</ul>
<script>
var vueApp = new Vue({
el: '#app',
data: {
questionViewModals: #Json.Serialize(Model.questionViewModals) //This is not working
}
})
</script>
Here is a working code , you could refer to :
#page
#model RazorPages3_0Test.SampleQuestionModel
<h1>SampleQuestion</h1>
<ul id="app">
<li v-for="item in questionViewModals">
{{ item.fullQuestions }}
</li>
</ul>
#section Scripts
{
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vueApp = new Vue({
el: '#app',
data: {
questionViewModals: #Json.Serialize(Model.questionViewModals)
}
})
</script>
}
Result
You could download Vue.js from here
Not sure about ASP.net -- but try to move #Json.Serialize(Model.questionViewModals) this piece of code to created hook.
<script>
var vueApp = new Vue({
el: '#app',
created() {
this.questionViewModals = #Json.Serialize(Model.questionViewModals);
},
data: {
questionViewModals: null
}
})
</script>
I am trying to pass the name from data to my settingTemplate.
However, I have not been able to make it work. Could anyone advice how I should approach this? I am new to Vue.
app.js
var app = new Vue({
el: '#app',
components: {
settingTemplate
},
data: {
name: 'Elon'
}
})
setting-template.js
const settingTemplate = {
template:
`<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="popoverButton-disable" variant="primary"></b-btn>
</div>
<div class="p-2">
<b-popover :disabled.sync="disabled" target="popoverButton-disable" title="{{name}}">
<a>Profile</a> | <a>Logout</a>
</b-popover>
</div>
</div>`
,
data() {
return {
disabled: false
}
},
methods: {
disableByRef() {
if (this.disabled){
this.$refs.popover.$emit('enable')
}else{
this.$refs.popover.$emit('disable')
}
}
},
props: ['name']
}
You should pass name to your component by attribute, not by data:
<div id="app">
<setting-template name="Elon" />
</div>
Here you can check working example:
https://codepen.io/anon/pen/dwrOqY?editors=1111
data is component private data - it's not passed to child components.
If you still need name in your main component data you can pass it to the child component like this:
<div id="app">
<setting-template :name="name" />
</div>
var app = new Vue({
el: '#app',
components: {
settingTemplate
},
data: {
name: 'Leon'
}
})
https://codepen.io/anon/pen/qLvqeO?editors=1111
i am new to vuejs, when i go over its document, I can't get this sample code from its "component" section work:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="example">
<input type="text" v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
Javascript:
Vue.component('child', {
props: ['message'],
template: '<span>testing: {{ message }}</span>'
})
new Vue({
el: '#example'
})
my understand: the value of the model can be passed on to the message properties of the child component, a string of the same content will be shown after "testing: " as soon as I key in anything in the input textbox. It didn't happen.
I tested the code from jsfiddle
The Vue instance of #example should have data parentMsg. Then, child and parent can use it. So, you need to add data at Vue instance.
new Vue({
el: '#example',
data: function() {
return { parentMsg: "Hi" };
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<script type="text/javascript">
Vue.component('child', {
props: ['myMessage'],
template: '<div>{{ myMessage }}</div>'
});
Vue.component('two-items-child', {
props: ['firstName', 'lastName'],
template: '<div><div>{{ firstName }}</div><div>{{ lastName }}</div></div>'
});
</script>
<body>
<div id="app">
<input id="inputParent" type="text" placeholder="parent" v-model="parentMsg">
<br>
<child my-message="Hi Vue."></child>
<two-items-child v-bind="wholeObj"></two-items-child>
<child :my-message="parentMsg"></child>
</div>
<script type="text/javascript">
// root instance
var vm = new Vue({
el: '#app',
data: {
parentMsg: "first msg",
wholeObj: {
firstName: "Hong",
lastName: "Gil-dong"
}
}
});
</script>
</body>
</html>
Check above example at example.
The example has data as an object but it is not a good way. Also check it data must be a Function
The parent component needs to have parentMsg as a data attribute, otherwise it won't be reactive.
new Vue({
el: '#example',
data() {
return {
parentMsg: ''
}
}
})
Here's a problem that I want to solve:
I have a button that when is pressed must append my-component to a dom.
If it is pressed 2 times there must be 2 <p> tegs. How can I achieve this?
js:
<script>
Vue.component('my-component', {
template: "<p>hello</p>",
})
var vue = new Vue({
el: "#App",
data: {},
methods: {
append: function() {
// unknown code here
}
}
})
</script>
html:
<div id = "App">
<button #click="append" class="btn btn-primary">Spawn stuff!</button>
</div>
Here is one way you could do that. This code iterates over a counter using v-for to iterate over a range.
Vue.component('my-component', {
template: "<p>hello</p>",
})
var vue = new Vue({
el: "#App",
data: {
hellocount: 0
},
methods: {
append: function() {
// unknown code here
this.hellocount++
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="App">
<my-component v-for="n in hellocount" :key="n"></my-component>
<button #click="append" class="btn btn-primary">Spawn stuff!</button>
</div>
This is a little atypical; normally you will drive the components rendered from actual data, as #RoyJ suggests in your comments.
From your comment below, you could build a form something like this.
Vue.component('my-input', {
props:["value", "name"],
data(){
return {
internalValue: this.value
}
},
methods:{
onInput(){
this.$emit('input', this.internalValue)
}
},
template: `
<div>
{{name}}:<input type="text" v-model="internalValue" #input="onInput">
</div>
`,
})
var vue = new Vue({
el: "#App",
data: {
form:{
name: null,
email: null,
phone: null
}
},
methods:{
append(){
const el = prompt("What is the name of the new element?")
this.$set(this.form, el, null)
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="App">
<my-input v-for="(value, prop) in form"
:key="prop"
v-model="form[prop]"
:name="prop">
</my-input>
<button #click="append">Add New Form Element</button>
<div>
Form Values: {{form}}
</div>
</div>
The code defines a form object and iterates over the properties of the form to render inputs for each property.
This is obviously extremely naive, handles only input texts, etc. But hopefully you get the idea.