使用 Vuejs 在单个 <li> 的弹出窗口中放置一个变量并添加变量的值

Question

在我的方法中我有：

Vue.component('app', {
    data: function () {
        return {
            messages: '',
            state: 0,
            id: 0,
            name: "",
            content: "",
            todo: [],
            columns: ["todo", "doing", "done"],
            showModal: false,
            popupActivo: false,
        }
    },

    methods: 
        callMethod: function (event) {
            this.todo.push({
                messages: this.messages,  
                state: this.state,
                id: this.id++,
            })
        },
        callPopup: function (item) {
            
            item.messages =  this.messages,
            this.todo.push({
                content: this.content,
            })
            console.log(item.messages, item.content)
        },
    },

还有我的模板：

<form v-on:submit.prevent="callMethod">
    <label for="new-todo">add</label>
    <input v-model="messages" id="new-todo">
    <button>Send</button>
</form>

<ul>
    <li v-if="item.state === 0" v-for="(item, key) in todo"
        v-bind:messages="todo.messages + todo.state + todo.id + todo.name + todo.content" :key="item.id"
        v-bind:id="key">
        <span>{{item.messages}}</span></br>
        <span>{{item.content}}</span></br>

        <a href="#popup1">
            <button>Edit</button>
        </a>

        <div id="popup1" class="overlay">
            <div class="popup">
                <a class="close" href="#">&times;</a>
                <form v-on:submit.prevent="callPopup(item)">
                    <label for="new-todo">Add name</label>
                    <input v-model="messages" id="new-todo"> </br>

                    <label for="new-todo">Add content</label>
                    <input v-model="content" id="new-todo"></br>
                    <button>Send</button>
                </form>
            </div>
        </div>
    </li>
</ul>

还有我的 css 如果你想要我的弹出窗口：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

当我打开我的弹出窗口时，我去放我的消息并添加内容。但是他修改了

里面的所有消息。
至于内容，他什么也没给我看。我在 callPopup 中尝试使用 console.log(item.content)，他告诉我“未定义”。

Answer 1

根据一些假设，我重新创建了您的场景。

<template>
  <div class="hello">
    <form v-on:submit.prevent="callMethod">
      <label for="new-todo"></label>
      <input v-model="messages" id="new-todo">
      <button>Send</button>
    </form>

    <ul v-if="state === 0">
      <li v-for="(item, key) in todo" :key="item.id">
        <p>MSG: {{item.messages}}</p>
        <p v-if="item.content">CONTENT: {{item.content}}</p>
        <button @click="editToDo = key">
          <button>Edit</button>
        </button>
      </li>
    </ul>
    <div v-if="editToDo !== null" class="overlay">
      <div class="popup">
        <button class="close" @click="editToDo=null">&times;</button>
        <form v-on:submit.prevent="callPopup(editToDo)">
          <label for="new-todo">Add name</label>
          <div>
            <p>Message:</p>
            <input v-model="messages" class="new-todo">
          </div>
          <div>
            <p>Content:</p>
            <input v-model="content" class="new-todo">
          </div>
          <button>Send</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      editToDo: null,
      messages: "",
      state: 0,
      id: 0,
      name: "",
      content: "",
      todo: [],
      columns: ["todo", "doing", "done"],
      showModal: false,
      popupActivo: false
    };
  },
  methods: {
    callMethod(event) {
      this.todo.push({
        messages: this.messages,
        state: this.state,
        id: this.id++,
        content: null
      });
    },
    callPopup(editToDo) {
      this.todo[editToDo].messages = this.messages;
      this.todo[editToDo].content = this.content;
      //reset values
      this.messages = "";
      this.content = "";
    }
  }
};
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  /* visibility: hidden;
  opacity: 0; */
}
li {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
</style>

Working Example

您可以看到我使用了 editToDo 数据属性来编辑列表中的确切项目。我传递给方法的只是一个 index。

我还将弹出窗口移到了 v-for 循环之外，并根据编辑的项目有条件地显示它。

您还可以看到，最初列表中的每个项目都是使用 content: null 创建的。这有助于在执行编辑时更新项目。我使用 v-if 只显示已添加的内容。

还有一些清理工作要做，删除冗余数据属性等，但我将把它留给您和您的偏好。

使用 Vuejs 在单个 <li> 的弹出窗口中放置一个变量并添加变量的值

Put a variable and add the value of a variable in a popup on a single <li> with Vuejs

javascript

forms

methods

popup

vue.js