vuejs рендерит часть шаблона внутри разных элементов без повторения

Question

Я новичок в Vuejs. Это то, что мне нужно сделать.

<div v-for="r in records">
    <div v-if="r.something">
        <div id="x">
            {{ r. something}}
            more of r here.
        </div>
    </div>

    <div v-else id="x">
        same div as in the block above.
    </div>
</div>

То, что я хочу сделать, это не определять div с id x два раза, так как он огромен.

Answer 1

Сделайте ваш div компонентом и обращайтесь к нему в обоих местах.

Есть много способов определить ваш компонент. Это пример показывает только один. Если вы используете WebPack, используйте один файловый компонент. Затем вы можете иметь свой скрипт, html и css в одном файле, который будет предварительно скомпилирован. Это лучший способ управлять своим "огромным" дивом. Затем вы можете продолжить рефакторинг и разбить его на несколько компонентов.

const myComponent = {
  template: "<div :id='id'>HELLO, my id is {{id}}. r.foo is {{r.foo}} </div>",
  props: {
    id: String
  },
  data() {
    return {
      r: {
        foo: 'bar'
      }
    }
  }
}

<div v-for="r in records">
  <div v-if="r.something">
    <my-component id='x' />
  </div>

  <div v-else id="x">
    <my-component id='x' />
  </div>
</div>