So I just started playing around with Vue.js. But I am having some problems with simple tasks like adding new "news item" to the array. JSFiddle included so if someone can tell me what I am doing wrong..
http://jsfiddle.net/pL5taqp6/
HTML
<div id="app">
<input type="text" v-model="news.title">
<input type="text" v-model="news.url">
<ul>
<li v-for="n in news">
{{ n.title }} - {{ n.url }}
</li>
</ul>
</div>
JS
new Vue({
el: '#app',
data: {
news: [
{ title: 'Test Title', url: '/test-title'}
]
}
});
You need a separate method to add items to news array. I added super simple variant of such function.
http://jsfiddle.net/00953sor/
HTML:
<div id="app">
<form #submit="addItem">
<input type="text" v-model="itemTitle">
<input type="text" v-model="itemUrl">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="n in news">
{{ n.title }} - {{ n.url }}
</li>
</ul>
<pre>{{ $data | json }}</pre>
</div>
JavaScript:
new Vue({
el: '#app',
data: {
news: [{
title: 'Test Title',
url: '/test-title'
}]
},
methods: {
addItem: function(e) {
e.preventDefault(); // prevent page refresh
this.news.push({
"title": this.itemTitle,
"url": this.itemUrl
});
this.itemTitle = this.itemUrl = '';
}
}
});
Related
I have a code in Vue that creates the elements of a menu using a v-for, and each element must have a different method when it's clicked.
So far I have this:
<span v-for="(menuItem, index) in menuItems" :key="index">
<li>
<a id="listItem">
<i class="bx" :class="menuItem.icon || 'bx-square-rounded'" />
<span class="links_name" v-on:click=menuItem.click>{{ menuItem.name }}</span>
</a>
<span class="tooltip">{{
menuItem.tooltip || menuItem.name
}}</span>
</li>
</span>
How can I assign different funcions on the v-on?
You can make the listener function as a node in the object list.
Sample Implementation
const app = new Vue({
el: '#app',
data() {
return {
list: [{
name: 'lg',
age: 27,
onClick: function() {
console.log("First Item Clicked");
}
}, {
name: 'camile',
age: 27,
onClick: function() {
console.log("Second Item Clicked");
}
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="item.name">
{{item.name}} - {{item.age}}
<button #click="item.onClick()">
Click Me
</button>
</li>
</ul>
<input type="text" v-model="list[0].name">
</div>
</body>
Ok, so, I am new to Vue and I am trying to make a simple to do list. I have managed to display it and stuff but I am having trouble with the code to add items to the list. When I click the button to add the task, it adds a bullet point but it doesn’t show the text given. For example, in the input box, I will type the name of a task but when I click the button, what I wrote doesn’t show up, just the bullet point.
I have tried putting the newTask part in other places but the same problem happens. I know this is probably a pretty silly question and the solution is probably pretty obvious but please help as fast as you can, I need to do this for school.
Here is my HTML:
<body>
<div id="app">
<!-- Vue App HTML Code -->
<h1>To Do List</h1>
<div id="app">
<ul>
<li v-for="x in tasks">
{{ x.text }}
</li>
</ul>
</div>
<div id="newTask">
<input type="text" value="taskName" placeholder="Task Name" v-model="newTask"></input>
<button v-on:click="tasks.push(newTask)">Add Task</button>
</div>
</body>
And my JavaScript/ Vue:
myObject = new Vue({
el: '#app',
data: {
tasks: [
{ text: '1' },
{ text: '2' },
{ text: '3' },
],
newTask: ''
},
})
I would really appreciate any other Vue tips (relevant or not) because it is my first week learning it and anything would be really useful.
You can achieve this by pushing the newTask in the existing tasks array.
Working Demo :
var vm = new Vue({
el: '#app',
data: {
tasks: [
{ text: '1' },
{ text: '2' },
{ text: '3' },
],
newTask: ''
},
methods: {
addTask() {
this.tasks.push({ text: this.newTask })
this.newTask = '';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>To Do List</h1>
<ul>
<li v-for="x in tasks">
{{ x.text }}
</li>
</ul>
<input type="text" placeholder="Task Name" v-model="newTask"/>
<button v-on:click="addTask">Add Task</button>
</div>
I want my list to be rendered like this:
A
B
C
Right now its being rendered like this:
1: A 2: B 3: C
Heres the code:
Todos:
<input type="text" class = "todo" placeholder = "Next Item" v-on:keyup.enter="addItem()">
<ol>
<li v-for="(todo, index) in todos" class ="todos">
{{index}}: {{ todo.text }}
</li>
</ol>
Heres the javascript portion:
addItem(){
var text = event.target.value;
this.todos.push({text, done: false, id: Date.now()})
text = '';
}
Any help would be very appreciated!
Not entirely sure why yours is displaying any different, but here's a rough example:
new Vue({
el: '#app',
data() {
return {
todos: ['derek', 'was', 'here'],
newTodo: ''
}
},
methods: {
addTodo() {
this.todos.push(this.newTodo);
this.newTodo = '';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<input v-model="newTodo" />
<button #click="addTodo">add</button>
<ol>
<li v-for="(todo, index) in todos" :key="index">{{todo}}</li>
</ol>
</div>
</div>
The only other thing I can think of is that you have some special CSS styling set that's causing the issue.
How do I create very simple instant search filter based on input field value wherein the data is already displayed?
I created this fiddle and I would like the same functionality but I am just worrying if my back end developer will pull the data using PHP to display all the products and that said reactivity will not work.
So what is the best approach to make it work in this scenario?
Edit: So without the products data it will be like this .
Here is my HTML code:
<div id="app">
<div class="searchbox">
<input id="search-product" placeholder="Search Products" v-model="search" >
</div>
<div class="product-list">
<span class="product" v-for="product in filteredList">
<div class="product-img">
<img src="https://avatars2.githubusercontent.com/u/6325887?s=120&v=4">
<span class="price-tag">{{ product.price }}</span>
</div>
<div class="product-name" v-bind:data-sku="product.sku">{{ product.productName }}</div>
</span>
</div>
</div>
My script:
const app = new Vue({
el: '#app',
data: {
search: '',
products:[
{sku: "SS0001",productName: "alimango buttered",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0002",productName: "alimango steamed",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0003",productName: "chili crab with tomato sauce",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0004",productName: "malaga prito",price: "seasonal", productCategory:"seafood specials"},
]
},
computed: {
filteredList() {
return this.products.filter(product => {
return product.productName.toLowerCase().includes(this.search.toLowerCase())
})
}
}
});
I'm new to Vue, and am playing around with v-model to see what I can create. I want to make an editable array of names. Here is my code so far:
var app = new Vue({
el: '#app',
data: {
names: ['Josh', 'Tom']
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
Editable list:
<ul>
<li v-for="name in names"><input type="text" v-model="name"></li>
</ul>
{{ names }}
</div>
When this is run, the inputs show up, and each one contains the correct value. However, typing in the inputs doesn't update the names array as I would have expected.
What am I doing wrong?
You're trying to use v-model to operate on a value, whereas you need to operate on a vue data field. For example, try the following:
var app = new Vue({
el: '#app',
data: {
people: [{name: 'Josh'}, {name: 'Tom'}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
Editable list:
<ul>
<li v-for="person in people"><input type="text" v-model="person.name"></li>
</ul>
{{ people }}
</div>
Alternatively, you could do:
var app = new Vue({
el: '#app',
data: {
names: ['Josh', 'Tom']
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
Editable list:
<ul>
<li v-for="(name, index) in names"><input type="text" v-model="names[index]"></li>
</ul>
{{ names }}
</div>