Vue：如何使用 v-if 在显示输入和标签之间切换

Question

我需要能够在输入字段和标签之间切换。单击“添加位置”按钮（创建一个新的 div）时，输入字段必须可见。但是当 div“可扩展”被最大化时，它必须被隐藏并且标签可见！

输入字段应仅在单击提到的按钮后立即可见，否则标签必须代替它。实现这一目标的最佳方法是什么？我正在考虑使用某种切换，因为我在其他地方使用它。

标签和输入字段放在div类“switch”中。

你也可以在这个jsFiddle看到代码！

HTML

 <div id="lotsOfDivs">
    <addingdivs></addingdivs>
</div>

Vue

var gate = 0;

Vue.component('addingdivs', {
    template: `
<div>
    <div id="header">
        <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
    </div>
    <div class="parent" v-for="div in divs" :style=" div.height ? { 'height': div.height }: null">
        <div class="big" v-if="div.expanded" :key="'expanded' + div.id">

        <div class="switch">
        <input type="text" v-if="inputFieldInfo">
                <label class="propertyLabel" v-else>

            <div class="firstChild">
                <button class="done" @click="increaseLimit">INCREASE</button>
            </div>
            <div class="secondChild">
                <button class="done" @click="expand(div)">EXPAND</button>
            </div>
        </div>
        <div class="small" v-else :key="'collapsed' + div.id">
            <button class="done" @click="expand(div)">EXPAND</button>
        </div>
    </div>
</div>
    `,
 data: function() {
        return {

            gate: gate,
            height: "",
            count: 0,
            locationsArr: ["one", "two", "three"],
            divs: [],
            InputFieldInfo: false
        }
    },

    methods: {
        expand: function(div) {
            if (div.expanded) {
                div.expanded = false
              this.height = ''
            } else {
              div.expanded = true
              this.height = '7vh'
            }
        },

        createDiv: function() {

            if (this.count <= gate) {   // Here you can decide how many divs that will be generated

                // this.count++;
                this.divs.push({
                  id: this.count,
                  expanded: true,
                   inputFieldInfo: true,
                  height: '',
                    });
            this.count++
        }},

        increaseLimit: function() {
// Here you can increase the number of divs that it's possible to generate
            gate++;

        }
    }
});

new Vue({

    el: '#lotsOfDivs',
});

Answer 1

模板有一些编译错误：

• <label> 需要一个结束标记（以及有用的文本内容）
• <div class="big"> 需要一个结束标签
• v-if 绑定到inputFieldInfo，但该变量被声明为InputFieldInfo（注意大写的I），但根据您的行为描述，该字段在每个位置容器中应该是唯一的，因此像这样的单一数据属性不起作用（如果我正确理解了您的描述）。

---

每个位置容器都应该有一个变量来包含位置名称（例如locationName）和另一个变量来包含<input> 和<label> 的显示/隐藏布尔值（即inputFieldInfo）：

createDiv: function() {
  this.divs.push({
          // ...
          inputFieldInfo: true,
          locationName: ''
        });
}

然后，我们可以将div.inputFieldInfo 和div.locationName 绑定到<input>。我们绑定到v-model，以便用户的文本自动反映到div.locationName 变量：

<input v-if="div.inputFieldInfo" v-model="div.locationName">

<label> 的内容应为div.locationName，以便在显示时包含来自<input> 的文本：

<label class="propertyLabel" v-else>{{div.locationName}}</label>

要在单击展开按钮时将<input> 与<label> 切换，我们将expand() 更新为将div.inputFieldInfo 设置为false 但仅当div.locationName 不为空时（这使用户如果需要，以后有机会重新访问/重新扩展容器以填充该位置）：

expand: function(div) {
  if (div.expanded) {
    div.expanded = false
    if (div.locationName) {
      div.inputFieldInfo = false
    }
    // ...

updated jsfiddle

Answer 2

您缺少一些结束标签和InputFieldInfo 的错误，它应该有一个小写的i。

var gate = 0;

Vue.component('addingdivs', {
  template: `
<div>
    <div id="header">
        <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
    </div>
    <div class="parent" v-for="div in divs" :style=" div.height ? { 'height': div.height }: null">
        <div class="big" v-if="div.expanded" :key="'expanded' + div.id">
          <div class="switch">
              <input type="text" v-if="inputFieldInfo">
              <label class="propertyLabel" v-else>Label</label>

              <div class="firstChild">
                  <button class="done" @click="increaseLimit">INCREASE</button>
              </div>
              <div class="secondChild">
                  <button class="done" @click="expand(div)">EXPAND</button>
              </div>
          </div>
        </div>

        <div class="small" v-else :key="'collapsed' + div.id">
            <button class="done" @click="expand(div)">EXPAND</button>
        </div>
    </div>
</div>
    `,
  data: function() {
    return {
      gate: gate,
      height: "",
      count: 0,
      locationsArr: ["one", "two", "three"],
      divs: [],
      inputFieldInfo: true
    }
  },
  methods: {
    expand: function(div) {
        this.inputFieldInfo = false
      if (div.expanded) {
        div.expanded = false
        this.height = ''
      } else {
        div.expanded = true
        this.height = '7vh'
      }
    },
    createDiv: function() {
                this.inputFieldInfo = true
      if (this.count <= gate) { // Here you can decide how many divs that will be generated
        // this.count++;
        this.divs.push({
          id: this.count,
          expanded: true,
          inputFieldInfo: true,
          height: '',
        });
        this.count++
      }
    },

    increaseLimit: function() {
      // Here you can increase the number of divs that it's possible to generate
      gate++;
    }
  }
});

new Vue({

  el: '#lotsOfDivs',
});

基本上，只要按下每个按钮，您就可以切换 inputFieldInfo 数据。

Answer 3

你可以通过使用这样的切换变量来做到这一点

Vue.component('addingdivs', {
    template: `
    <div>
       <div>
        <input type="text" v-if="takeinput">
        <label v-if="!takeinput">
        <button @click="toggleInput()">
        </div>
    </div>
    `,

 data: function() {
        return {
            takeinput:true,           
        }
    },

    methods: {
        toggleInput: function(){
            let vm = this;
            vm.takeinput = ( vm.takeinput == true) ? false : true
            }
        }
});

new Vue({

    el: '#lotsOfDivs',
});

在本例中，我们只是在 click 上切换 takeinput 的值，因此根据值显示标签或输入。

这是一个非常基本的例子。但您可以根据需要扩展它