index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
components/Form.vue
<template>
<form v-for="movie in movies">
<h3>{{ movie.name }}</h3>
<button type="button"
v-on:click="movie.quantity -= 1"
:disabled="movie.quantity <= 0"
> - </button>
{{ movie.quantity }}
<button type="button"
v-on:click="movie,quantity += 1"
:disabled="movie.quantity >= movie.available"
> + </button>
</form>
</template>
<script>
export default {
name: "Form",
data() {
return {
movies: [
{
name: "Avengers",
available: 3,
quantity: 0,
},
{
name: "Terminator",
available: 5,
quantity: 0,
}, ]
}
}
}
</script>
App.vue
<template>
<h2> Películas </h2>
<Form />
</template>
<script>
import Title from "./components/Title.vue";
import Form from "./components/Form.vue";
export default {
name: "App",
components: {
"Form": Form,
},
data() {
return {
movies: [
{
name: "Avengers",
available: 3,
quantity: 0,
},
{
name: "Terminator",
available: 5,
quantity: 0,
},
],
};
},
methods() {
return {
updateMovie(newMovie) {
const movieIndex = this.movies.findIndex(
(movie) => movie.name === newMovie.name
);
this.movies[movieIndex] = newMovie;
},
};
},
};
</script>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
vuestyled-platziintroframeworks_b33c3e60-f89f-4eb6-a114-741c1cd6f033.zip