vue.js-How to toggle between DIVs with bound data in Vue?

muka.gergely 2020-11-28 20:04:36

I think you should build more on the (arguably) biggest features of Vue, namely: reactivity & components.

Break down the logic a bit more, until you arrive at elements that do only one thing - those elements can be your components. Then build up the business logic from those atomic components.

Vue.component('NewEmail', {
  data() {
    return {
      email: null,
    }
  },
  methods: {
    handleKeyup() {
      this.$emit("add-email", {
        email: this.email,
        comment: null
      })
      this.email = null
    }
  },
  template: `
    <div>
      <label>
        NEW EMAIL: <input
          type="email"
          placeholder="Type in an email"
          v-model="email"
          @keyup.enter="handleKeyup"
        />
      </label>
    </div>
  `
})

Vue.component('SingleEmailRow', {
  props: {
    email: {
      type: Object,
      default: null,
    }
  },
  methods: {
    handleDeleteClick() {
      this.$emit('remove-email', this.email)
    },
  },
  template: `
    <li
      class="d-flex"
    >
      <div>
        {{ email.email }}
      </div>
      <div>
        <button
          @click="handleDeleteClick"
        >
          X
        </button>
      </div>
      <component
        :is="email.comment ? 'HasEmailComment' : 'NoEmailComment'"
        :email="email"
        v-on="$listeners"
      ></component>
    </li>
  `
})

Vue.component('HasEmailComment', {
  props: {
    email: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleUpdateComment() {
      this.$emit('update:comment', { ...this.email,
        comment: null
      })
    }
  },
  template: `
    <div
      class="d-flex"
    >
      <div>
        {{ email.comment }}
      </div>
      <button
        title="Remove comment"
        @click="handleUpdateComment"
      >
        -
      </button>
    </div>
  `
})

Vue.component('NoEmailComment', {
  props: {
    email: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      comment: null,
    }
  },
  methods: {
    handleUpdateComment() {
      this.$emit('update:comment', { ...this.email,
        comment: this.comment
      })
    }
  },
  template: `
    <div
      class="d-flex"
    >
      <div>
        <input
          v-model="comment"
          type="text"
          placeholder="Write a comment"
        />
      </div>
      <button
        title="Add comment"
        @click="handleUpdateComment"
      >
        +
      </button>
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      emailList: [],
    }
  },
  methods: {
    handleAddEmail(newEmail) {
      if (!this.emailList.find(({
          email
        }) => email === newEmail.email)) {
        this.emailList.push(newEmail)
      }
    },
    handleRemoveEmail(toRemove) {
      this.emailList = this.emailList.filter(({
        email
      }) => {
        return email !== toRemove.email
      })
    },
    handleUpdateComment(newEmail) {
      this.emailList = this.emailList.map(email => {
        if (email.email === newEmail.email) {
          return newEmail
        } else {
          return email
        }
      })
    }
  }
})

.d-flex {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <new-email @add-email="handleAddEmail"></new-email>
  <ul v-for="(email, i) in emailList" :key="i">
    <single-email-row :email="email" @remove-email="handleRemoveEmail" @update:comment="handleUpdateComment"></single-email-row>
  </ul>
</div>

OK, the comment handling in SingleEmailRow could be put to its separate component (based on my thoughts above).

The main points in the snippet above are:

there's only one original data source (emailList in the root component) that is passed down as props where needed, and all the other components & functions just manipulate THAT list via events (reactivity is great!)
because all the components are based on one central data source, they just have to work with the item they get as props. (Ok, they have some internal state, but hey - this is only a snippet! :) )
the two components have only one responsibility:
- NewEmail: to add an item to the central emailList
- SingleEmailRow: to manage the data in ONE email item

I hope this helps you a bit to reach a solution for your problem.

EDIT: UPDATING SNIPPET

I had to update the snippet, because I wasn't satisfied with it.

Modifications:

adding two new components: HasEmailComment, NoEmailComment
updated SingleEmailRow with the two new components

Now, all the components have only one task to do.

Makis Milas 2020-11-29 13:59:51

Your solution is working and the info you provided helped me a lot hence I'm accepting it as the correct answer. I was looking though more of a quick fix if there could be one. Now I need to rearrange the whole structure ..

Makis Milas 2020-11-29 14:27:54

FYI: I fixed it in another way. Basically I rendered the data coming from the db in the div rather than binding straight away the data from the input field. Thank you very much for your effort @gergely

muka.gergely 2020-11-29 18:25:11

@MakisMilas thanks for the response! I'm glad that I could help and that you found a solution!

How to toggle between DIVs with bound data in Vue?

EDIT: UPDATING SNIPPET

热门帖子

热门github