I am working on a project and decided to use Vuejs to create a dynamic form. After successfully putting this form together, I copied the code to begin using in a Nodejs project, however, it no longer creates new form fields. Instead, for a brief second it creates a form field and then it immediately disappears. I am confused as to why it's doing this, any suggestions?
// Modules required to run the application
const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');
// Creates an express application
var app = express();
// Config
const db = require('./config/keys').MongoURI; // Database Config
require('./config/passport')(passport); // Passport Config
// Connect to Mongo
mongoose.connect(db, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected...'))
.catch(err => console.log(err));
// Accepts a parameter from the 'ENVIROMENT' for what
// port to listen on and sends to sever
app.set("port", process.env.PORT || 3000);
// Sets up view engine (using 'ejs')
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
// Bodyparser - urlencoded() is used to recognize incoming Request Object as strings or arrays
// Specifically to help with POST and PUT Requrests
app.use(express.urlencoded({ extended: false })); // 'extended' has to do with whether or not a nested object can be used ('false' means it cannot)
// Express session middleware
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true,
}));
// Passport middleware
app.use(passport.initialize());
app.use(passport.session());
// Connect flash
app.use(flash());
// Allows express app access to CSS and JavaScript files
app.use(express.static(path.join(__dirname, 'public')));
// Allows for access to user information after login
app.use(function(req, res, next){
res.locals.user = req.user || null;
next();
});
// Route Files
app.use('/', require('./routes/index')); // Module containing basic paths for application
app.use('/users', require('./routes/users')); // Module containing paths for user login and registration
app.use('/recipes', require('./routes/recipes')); // Module containing paths for user user recipes
app.listen(app.get("port"), function(){
console.log(`Listening to server on port ${app.get("port")}...`);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="newRecipeContainer">
<form action="/recipes/createRecipe" method="POST">
<div class="recipeNameContainer">
<label class="recipeNameLabel">Title</label>
<input type="text" name="recipeName">
</div>
<div class="directionsContainer">
<button class="addDirectionButton" @click="addDirectionForm">Add Another Direction</button>
<div class="allDirections" v-for="(direction, index) in directions">
<button class="deleteDirectionButton" @click="deleteDirectionForm(index)">Delete Direction</button>
<label class="direction">{{ index }}.)</label>
<input type="text" name="directions" v-model="direction.direction">
</div>
</div>
<button class="createRecipeButton" type="submit">Create Recipe</button>
</form>
</div>
<script src="/controls/newRecipeControl.js"></script>
</body>
</html>
var app = new Vue({
el: '.directionsContainer',
data: {
directions: [
{
direction: ''
}
]
},
methods: {
addDirectionForm: function(){
this.directions.push({
direction: ''
})
},
deleteDirectionForm: function(index){
if(index != 0)
this.directions.splice(index, 1)
}
}
})
Thanks for any help!
