I have a VueJS- HTML file like this
<!DOCTYPE html>
<body>
<div id="root">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input type="text" id="input" v-model="newName" />
<button #click="addName">Add Name</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"</script>
<script>
new Vue({
el: '#root',
data: {
newName: '',
names: ['Joe', 'Mary', 'Jane']
},
methods: {
addName() {
this.names.push(this.newName);
this.newName = '';
}
}
});
</script>
</body>
Whenever I do this in console
$vm0.names[0] = 'Gurung'
It doesn't update the first name instantly but I have to add a new name to get it updated. Another thing is this variable works only when I click on Root in the Vue Extension. One guess of mine was that $vm0 was just used by extension but why does doing manipulations with it changes it in DOM too (not instantly as I told earlier).
Due to limitations in JavaScript, Vue cannot detect the following
changes to an array:
When you directly set an item with the index, e.g.
vm.items[indexOfItem] = newValue. When you modify the length of the
array, e.g. vm.items.length = newLength.
Reference
$vm0.$set($vm0.names, 0, 'Grung');
Related
I have a web api project and I want to play an animation on one of my html spans.Specificly the vue returns a number and I want that number to animate increasing from 00.00% up to its value.It actually works fine with a js script that I found online if I delete a part of my html but it doesnt work and the numbers appears as 00.00 if I use my entire HTML Code.
Here is my code:
<html>
<body>
//This is the part that I want to work but appears as 00.00
<span class="Animation">{{number}}</span>%
//This is the part that if I delete it the upper part works but I want both parts in my project
<div v-for="item in items">
<h3>{{item1.name1}}</h3>
<h5 class="prediction-2">Score:{{item2.name2}}%</h5>
<a v-bind:href="'test.html?id=' + item.other_id" class="btn">
<span style="color:white;">click here</span>
</a>
</div>
<script>
$('.Animate').each(function () {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 5000,
easing: 'swing',
step: function () {
$this.text(this.Counter.toFixed(2));
}
});
});
</script>
</body>
</html>
````````````````````
Your Vue markup is broken. Because it errors it blocks the execution of JavaScript in your page and one of the side effects is the animator doesn't run anymore.
This code is invalid:
<div v-for="item in items">
<h3>{{item1.name1}}</h3>
<h5 class="prediction-2">Score:{{item2.name2}}%</h5>
<a v-bind:href="'test.html?id=' + item.other_id" class="btn">
<span style="color:white;">click here</span>
</a>
</div>
It loops through items defining item for each iteration but then tries to use item1 and item2 (which are not defined).
My advice is to exclude the animator from your question (as it clearly works as intended when there are no errors in the page) and rewrite your question by describing what the Vue code should do.
An example of how a valid v-for looks like:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
items: [{
name: 'Item 1',
prediction: 56,
other_id: 101
}, {
name: 'Item 2',
prediction: 82,
other_id: 102
}]
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items">
<h3>{{item.name}}</h3>
<h5 class="prediction-2">Score: {{item.prediction}}%</h5>
<a :href="'test.html?id=' + item.other_id" class="btn">
<span>click here</span>
</a>
</div>
</div>
As you can see, it's looping through each item and rendering them according to each of their values. You'll also notice the links are correct. Without more definition on what the code should actually do/render, I can't help you more.
Im usign vue js for validate form before submit.
This code start a new Vue getting data from the ID = app:
const app = new Vue({
el:"#app",
data:{
text: null
}
I want create a custom attribute named form-number and get data usign my
attribute and not the div.
Example:
Change this
<form id="app" method="post">
<input type="text" v-model='text'>
</form>
For this
<form form-number="1" method="post">
<input type="text" v-model='text'>
</form>
const app = new Vue({
el:"form-number='1'",
data:{
text: null
}
In Vue the template is not to be read - inputs are possible through bindings (like v-model).
See this snippet:
const app = new Vue({
data: {
formNumber: 1,
text: ''
}
})
app.$mount('[myCustomAttribute="mounthere"]')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div myCustomAttribute="mounthere">
<form :form-number="formNumber" method="post">
<label for="text1">
From{{ formNumber }} input:
<input id="text1" type="text" v-model="text" />
</label>
</form>
{{ text }}
</div>
formNumber is also defined in the data attribute and bound to the form-number attribute, which also appears in the HTML.
EDIT
el: "#app" is just a convention for the basic Vue app. You can choose where to mount the app by any valid selector - like [myCustomAttribute="mounthere"] also works.
I'm trying to build a parent-child tree in Vue, and I want to pass the parent's DOM/element ID down to the child so that they can append to it. Here is a simple example of what I am trying to achieve as the DOM structure in the browser:
<div id="my-id">
<p>parent-comp header</p>
<div id="my-id-child">
<p id="my-id-child-content">child-comp content</p>
</div>
<p>parent-comp footer</p>
</div>
The only way I have been able to do this so far is to duplicate the id into another property propid and pass them both down the tree. This seems messy. See my sample code:
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<parent-comp id="my-id" propid="my-id"></parent-comp>
<script type="application/javascript">
Vue.component('parent-comp', {
props: {
propid: String
},
template: ` <div>
<p>parent-comp header</p><child-comp :id="propid + '-child'" :propid="propid + '-child'"></child-comp><p>parent-comp footer</p>
</div>`,
});
Vue.component('child-comp', {
props: {
propid: String
},
template: `<div>
<p :id="propid + '-content'">child-comp content</p>
</div>`,
});
new Vue({
el: '#my-id'
});
</script>
</body>
</html>
I'm guessing there must be a better way to achieve this? It seems like it should be a simple task? Thanks.
There are indeed better ways to refer to specific elements within the current component's template: use refs in the template, which would allow your component script to access them via this.$refs:
<template>
<div>
<button ref="myBtn">Click</button>
</div>
</template>
<script>
export default {
methods: {
doFoo() {
console.log(this.$refs.myBtn)
}
}
}
</script>
The scope isolation is maintained. For example, when there are multiple instances of component A on a page, and one of them gets a reference to its button (via this.$refs.myBtn) to disable it, only that instance's button is disabled. All other A instances are unaffected.
I have my input field in one div, and will have label in another div (as sidebar in my application). I want to update label in sidebar, as I type in input on first div.
I am happy to create second div a component if that's the way. I was reading online, and it was said we could use props to pass data to component. But I am not able to link input field to component. Please find my code as below:
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2'
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp></testp>
</div>
</body>
</html>
As Pointed in Comment You have no reason to have two separate Vue instance and the First Answer is correct. But in some cases where you really need to have multiple Vue instances, you can actually use them in the following manner.
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2',
computed: {
newMessage() {
return app.message;
}
},
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp :message="newMessage"></testp>
</div>
</body>
</html>
Please observe the computed value newMessage is actually getting its value form a different Vue instance (app) and it is also reactive. Therefore whenever the value in first Vue instance changes, it is updated in another Vue instance.
Codepen: https://codepen.io/ashwinbande/pen/xMgQQz
Like I have pointed out in my comments, there is no reason for you to use two separate Vue instances. What you can do is simply wrap everything within an app container, e.g. <div id="#app">, and then instantiate your VueJS instance on that element instead.
Then, you can use v-bind:message="message" on the <testp> component to pass in the message from the parent. In this sense #div1 and #div2 are used entirely for markup/decorative purposes and are not used as VueJS app containers in your code.
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp v-bind:message="message"></testp>
</div>
</div>
I have a problem with the label of a text input with materializejs + vuejs
the label does not move up if I change the value of the input field with vue (it behaves correctly if I change manually the input)
a simple (not elegant) code showing that is (also on JSfiddle):
correct expected behavior by editing the field manually
not correct behavior by clicking on the last div (starting from an empty field): it changes the value of the input without moving the label
html
<div id=app>
<div class="input-field ">
<input type="text" v-model="value" id="field">
<label for="field">Field</label>
</div>
<div #click="value='newValue'">
clickOnMe
</div>
</div>
Javascript
new Vue({
el: '#app',
data: {
value: ''
}
})
See Prefilling Text Inputs section, seems there's a patch function that needs to be applied
<div #click="clickMe">
methods: {
clickMe() {
this.value = 'newValue';
$(document).ready(function() {
Materialize.updateTextFields();
});
}
}