删除 Vue 组件中的项目，它不起作用（（我试图将它部署在 heroku 上但失败了（（

Question

<template>
 <div id="newRecipes">
  <h3>NewRecipes</h3>
   <div class="row">
     <form @submit.prevent="addRecipe" class="col s12">
       <div class="row">
        <div class="input-field col s12">
          <input type="number"
          required
          disabled
          >
          <label>Recipe ID#</label>
        </div>
       <div class="row">
        <div class="input-field col s12">
          <input type="text"
          v-model="name"
          required
          v-reset-input
          >
          <label>Recipe Name</label>
        </div>
       </div>
       <div class="row">
        <div class="input-field col s12">
          <input type="text"
          v-model="method"
          required
          v-reset-input
          >
          <label>Method of create Recipe</label>
        </div>
       </div>
       <div class="row">
        <div class="input-field col s12">
          <input type="text"
          class="reset-input"
          v-model="text"
          ref=input
          @keypress.enter.prevent="addIngredients()"
          v-reset-input
          >
          <label>Ingredients of Recipe</label>
          <i class="fa fa-plus" @click="addIngredients()"></i>
            <ul class="collection with-header" v-if="this.ingredients.length > 0">
              <li
              v-for="item in ingredients"
              v-bind:key="ingredients[item]"
              v-bind:id="item"
              class="collection-item"
              >
              <div class="chip">
                {{item}}
              </div>
              <i class="fa fa-trash" @click="removeIngredients(item)"></i>
              </li>
            </ul>
        </div>
       </div>
      </div>
      <button type="submit" class="btn">Submit</button>
      <router-link to="/" class="btn orange lighten-1">Cancel</router-link>
     </form>
   </div>
 </div>
</template>

<script>
import AddRecipe from '../services/AddRecipe'

export default {
  name: 'newRecipes',
  data () {
    return {
      recipe_id: +this.$route.params.recipes.length + 1,
      name: null,
      ingredients: [],
      method: null,
      text: ''
    }
  },
  methods: {
    addIngredients () {
      if (this.$refs.input.value !== '') {
        this.ingredients.push(this.$refs.input.value)
        this.text = ''
      }
    },
    removeIngredients (value) {
      if (this.ingredients.length === 1) {
        this.ingredients.pop(1)
      } else {
        this.ingredients.filter(item => item !== value ? console.log(this.ingredients, item) : -1)
      }
    },
    async addRecipe () {
      try {
        if (this.ingredients.length > 0 && this.$refs.input.value === '') {
          await AddRecipe.add({
            recipe_id: Number(this.recipe_id),
            recipe_name: String(this.name),
            recipe_ingredients: Array.from(this.ingredients),
            recipe_method: String(this.method),
            recipe_date: null
          }, this.$router.push('/'))
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
.reset-input {
    font-size: 1.5em;
    padding: 10px 15px;
    box-shadow: none;
    border: 1px solid #157977;
    width: 100%;
    outline: none;
    background-color: #eee;
}

.v-reset-input {
    top: 8px;
    right: 25px;
    font-size: 1.5em;
    display: none;
}

.v-reset-input.v-reset-input-active {
    display: block;
}
</style>

删除项目

我添加两个项目来显示

在控制台中，当我点击 asdasdasd 我得到 ["asdasdasd", "12313123", __ob__: Observer] "12313123" 但在渲染中我仍然有两个项目我做错了什么？

还有一个问题，我尝试在 heroku 中部署此应用程序，如果我的前端成功并且也部署了，但在 heroku 上呈现时，我只得到 html 页面和我的响应数据库？

我得到 html 页面

[{"id":"3rP8GWGdCJvCto6YbWT0","recipe_id":1,"name":"Old Delhi-style butter chicken","date":"1/7/2020","ingredients":["120g Greek yogurt","thumb-sized piece ginger  "," grated","4-5 garlic cloves"," crushed","1 tbsp vegetable oil","1 lemon  "," juiced","3 tsp mild chilli powder","1 tsp ground cumin","½ tsp garam masala","½ tsp turmeric"],"method":"Mix all of the marinade ingredients together in a large mixing bowl with 1½ tsp salt. Add the chicken pieces and mix together until well-coated, then cover the bowl and chill for 1 hr or overnight in the fridge."},{"id":"QHQ3iHVVn9j4qu26X8U5","recipe_id":2,"name":"Chinese chicken curry","date":"12/18/2018","ingredients":["4 skinless chicken breasts ","cut into chunks (or use thighs or drumsticks) 2 tsp cornflour 1 onion  ","diced 2 tbsp rapeseed oil  1 garlic clove","crushed 2 tsp curry powder 1 tsp turmeric  ½ tsp ground ginger pinch sugar  400ml chicken stock 1 tsp soy sauce  handful frozen peas","rice to serve"],"method":"Cook an easy, healthy curry with just 15 minutes preparation for a wholesome family meal. Serve with fluffy boiled rice"},{"id":"Y2HckKPLdlgGwguyaZ7I","recipe_id":3,"name":"Quick chicken hummus bowl","date":"9/9/2019","ingredients":["500g sweet potato  "," peeled and cut into bite-size pieces 1 tbsp olive oil  4 skinless chicken thigh fillets"," each cut into large chunks 1 large red onion"," cut into wedges 2 tbsp rogan josh curry paste 2 large tomatoes  "," roughly chopped 125g spinach"],"method":"Make our healthy chicken and hummus salad bowl for a delicious budget lunch option. It can be thrown together in just 10 minutes and delivers three of your 5-a-day"},{"id":"xHjGF43ARNtWgLMDmG28","recipe_id":4,"name":"Summer vegetable & pesto rose tart","date":"7/19/2017","ingredients":["250g spelt flour","125g cold butter","cubed","25g gruyère   (or vegetarian alternative)","finely grated","1 egg yolk ","beaten"],"method":"First, make the pastry. Tip the flour into a bowl with 1/ 2 tsp salt. Add the butter and rub in using your fingertips until it resembles breadcrumbs. Stir through the cheese with a cutlery knife. Add the egg yolk, drizzle over 1 tbsp cold water, then use the knife to stir it in until clumps of dough start to form. Tip onto a work surface and bring the dough together with your hands into a smooth ball. Alternatively, you can make the pastry in a food processor. Shape into a disc, wrap in cling film and chill for at least 20 mins."},{"id":"Yrm0TOIrwf28Pk5VHmME","recipe_id":5,"name":"asdasdasdasdasdasd","date":"3/3/2020","ingredients":["asdasdasdasdasd","asdasdasdasdasd"],"method":"asdasdasdasdasdasdasdasd"},{"id":"Dp5jxhsbeZm6zHCfXixh","recipe_id":6,"name":"dasdasdqwe","date":"3/3/2020","ingredients":["asdasdasdasd","asdasdqweqw","asdasdasdasdasdad"],"method":"qweqweqweqwe"},{"id":"sO1WABnOFkmKtl1ylKpm","recipe_id":7,"name":"asdasdasd","date":"3/3/2020","ingredients":["asdasdasd","qweqweqwe","asdasdweqwe","asdaqweqweqwdasd"],"method":"qweqweqwdqwdas"},{"id":"bhBy0uyeopCMDjt3HfxY","recipe_id":8,"name":"qweqweqweq","date":"3/3/2020","ingredients":["adsasdasdqwe","asdaqweqweadsda","qweqweqweqweq"],"method":"asdasdweqwdas"},{"id":"uTYAySAmvHLoI7ZLpfVw","recipe_id":9,"name":"aasdadqweqwe","date":"3/3/2020","ingredients":["asdqwdqwqewqe","qweqweqdsasdads","qweqweqweqwedasd"],"method":"asdasdqweqdasd"},{"id":"FVZn9ZoFPtaypBA2pTuA","recipe_id":10,"name":"qweqweqweqwe","date":"3/3/2020","ingredients":["wasdadsasd","asdasdasdasd"],"method":"qweqwe123123eqwe"},{"id":"5rNQQpm06Y0AdaFu43MW","recipe_id":11,"name":"asdasdasdasd","date":"3/3/2020","ingredients":["asdasdasdqwe","qweqweqweasdasd"],"method":"asdasdasdasdasdasd"}]

我的数据库！我在部署和修复时只有错误

不知道我做错了什么

Answer 1

在 removeIngredients (value) 方法中，您不会从 ingredients 中删除任何内容。您可以尝试比使用 filter 更好的解决方案，但正确的用法是：

this.ingredients = this.ingredients.filter(item => item !== value);

因为它需要一个布尔值来执行比较。

编辑

要从 find 函数中获取一些日志，您可以尝试在 lambda 表达式中使用花括号块：

this.ingredients = this.ingredients.filter(item => {
  item !== value ? console.log(this.ingredients, item) : -1;
  return item !== value;
});

要永久删除元素而不重新分配 this.ingredients 您可以使用 splice 方法：

conat index = this.ingredients.findIndex(item => item === value);
if (index > -1) {
  this.ingredients.splice(index, 1);
}

删除 Vue 组件中的项目，它不起作用（（我试图将它部署在 heroku 上但失败了（（

Delete items in Vue component, it’s not working(( I tried to deploy it on heroku and was failed((

deployment

heroku

vue.js

vue-component

heroku-cli