Componentes con eventos Vue.js
Publicado por Camila (2 intervenciones) el 17/11/2018 21:56:50
Hola, bueno queria resolver una duda acerca de los componentes js,estoy haciendo una tarea
en la que debo mediantes inputs guardar un objeto que se envia a una tabla dinamicamente,eso ya esta hecho,
al agregar el objeto se agregan dos botones en la tabla que son eliminar y editar, estos dos los hice con
componentes Vue, pero al agregarle el evento v-on:click a los componentes, no reconoce la funcion eliminar() y editar() que estan
en el modelo, por lo que no puedo eliminar ni editar, se que en el momento en que les agrego ese evento
surge el error, agredeceria una respuesta,gracias .
ese es el mensaje al presionar el boton eliminar.
[Vue warn]: Property or method "eliminar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <BtnEliminar>
<Root>
vue.js:597:7
TypeError: eliminar is not a function[Aprender más]
aqui el codigo
y este es el html(que deberia estar todo correcto pero por cualquier cosa)
en la que debo mediantes inputs guardar un objeto que se envia a una tabla dinamicamente,eso ya esta hecho,
al agregar el objeto se agregan dos botones en la tabla que son eliminar y editar, estos dos los hice con
componentes Vue, pero al agregarle el evento v-on:click a los componentes, no reconoce la funcion eliminar() y editar() que estan
en el modelo, por lo que no puedo eliminar ni editar, se que en el momento en que les agrego ese evento
surge el error, agredeceria una respuesta,gracias .
ese es el mensaje al presionar el boton eliminar.
[Vue warn]: Property or method "eliminar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <BtnEliminar>
<Root>
vue.js:597:7
TypeError: eliminar is not a function[Aprender más]
aqui el codigo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.component('btn-editar', {
props: ['id'],
template :'<button type="button" v-on:click="editar(id)">modificar</button>',
});
Vue.component('btn-eliminar',{
props : ['id'],
template : '<button type="button" class="btn btn-success" v-on:click="eliminar(id)">eliminar</button>'});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var contador=0;var modificacion=0;new Vue({
el : '#app',
data : {
lista : [
],
nombre : '',
descripcion : '',
precio : '',
id : '',
},
methods : {
agregarProducto : function(){
this.id=contador;
if(this.nombre!="" && this.descripcion!="" && this.precio!="" ){
this.lista.push({id:this.id, nombre:this.nombre, descripcion:this.descripcion, precio:this.precio,
})
contador++;
this.nombre="";
this.descripcion="";
this.precio="";
//this.id="";
} else{alert ("ingrese todos los datos!");
}},
editar : function(index){
this.nombre=this.lista[index].nombre;
this.descripcion=this.lista[index].descripcion;
this.precio=this.precio[index].precio;
modificacion=index;},
eliminar : function(index){
this.lista.splice(index, 1);
},
modificar : function(){
this.lista[modificacion].nombre=this.nombre;
this.lista[modificacion].descripcion=this.descripcion;
this.lista[modificacion].precio=this.precio;
},
}});
y este es el html(que deberia estar todo correcto pero por cualquier cosa)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div id="app">
<div class="container">
<div class="row justify-content-center ">
<div class="col-md-6 col-xs-12 border">
<h2>Agregar Producto</h2>
<form action="">
<label for="nombre" >Nombre:</label>
<input type="text" name="nombre" class="form-control" v-model="nombre" >
<label for="descripcion">Descripcion:</label>
<input type="text" class="form-control" name="descripcion" v-model="descripcion">
<label for="precio">Precio:</label>
<input type="number" class="form-control" name="precio" v-model="precio">
</br>
<input type="button" value="guardar"
class="btn btn-success"
v-on:click="agregarProducto">
<input type="button" value="modificar"
class="btn btn-success"
v-on:click="modificar">
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Lista de Productos</h2>
<table class="table">
<tr>
<th>Nombre</th>
<th>Descripcion</th>
<th>Precio</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
<tr v-for="producto in lista">
<td v-text="producto.nombre"></td>
<td v-text="producto.descripcion"></td>
<td v-text="producto.precio"></td>
<td>
<btn-editar>
</btn-editar>
</td>
<td>
<btn-eliminar>
</btn-eliminar>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<pre></pre>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="codigo.js"></script>
</body>
</html>
Valora esta pregunta
0
