Как указать целевой элемент из нескольких элементов с помощью vuejs - PullRequest
Новая
       21

Как указать целевой элемент из нескольких элементов с помощью vuejs

0 голосов
/ 09 декабря 2018

Я немного новичок в интерфейсе, особенно vue.js.Я пытаюсь сделать небольшое приложение, которое будет содержать 5 элементов, каждый элемент на самом деле получает данные из объекта с 2 значениями - имя и описание.Также каждый объект находится в массиве.

Имя по умолчанию отображается как заблокированное, а описание по умолчанию не отображается.Я хочу, чтобы приложение отображало описание, чтобы заблокировать каждый раз, когда я нажимаю на имя.Вот весь код, вы можете запустить его на codepen или локально, он будет работать без проблем.Вы можете игнорировать все, что находится над тегом body. 

<html>
    <head>
        <style>
            *{margin: 0px; padding: 0px; font-family: sans-serif; list-style-type: none; }
            body{background: #003366;}
            #container{width: 1000px; margin: 100px auto;}
            #elements{width: 100%;}
            #elements li{display: inline-block; width: 40%; margin: 40px 5%; background: #FFF; color: #003366; box-shadow: 10px 10px 0px #222; user-select: none;}
            #elements li h1,h3{padding: 10px 20px;}
            #elements li h3{display: none;}
            #elements li h1{cursor: pointer;}
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <ul id='elements'>
                <li v-for="eleObject in eleObjects">
                    <h1 v-on:click="expand" v-text="eleObject.name"></h1>
                    <h3 v-text="eleObject.description"></h3>
                </li>
            </ul>
        </div>
    </body>

    <script>
        let elementList = new Vue({
            el: "#elements",
            data:{
                eleObjects:[
                    {name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website"},
                    {name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website"},
                    {name: "JavaScript 2015", description: "Used for event handling, functionality and dynamics of the website"},
                    {name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites"},
                    {name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."}
                ]
            },
            methods:{
                expand: function(){

                }
            }
        });
    </script>
</html>

Ответы [ 3 ]

0 голосов
/ 09 декабря 2018

Чтобы достичь желаемого поведения, было бы неплохо иметь какое-то свойство для объекта, которое бы указывало, является ли вещь видимой или нет. 

eleObjects:[
    {name: "HTML5", description: "Used for front end web development more specifically for building the structure of a website", visible: false},
    {name: "CSS3", description: "Used for giving style to the HTML elements, their positioning and overall look of the website", visible:  false},
    {name: "JavaScript 2015", description: "Used for event handling, functionality and dynamics of the website", visible: false},
    {name: "Vue JS", description: "JavaScript framework for component based programming which is used to create more dynamic websites", visible: false},
    {name: "Django.py", description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc...", visible: false}
]

Из цикла v-for вы можете получить индекс, и то же самоепередача индекса в функцию expand, так что вы можете получить доступ к элементу, по которому щелкнули, из метода. 

<li v-for="(eleObject, index) in eleObjects">
    <h1 @click="expand(index)" v-text="eleObject.name"></h1>
    <h3 v-show="eleObject.visible" v-text="eleObject.description"></h3>
</li>

expand метод должен быть простым, мы только хотим обновить visible состояние элемента, по которому щелкнули. 

expand: function(index){
   this.eleObjects[index].visible = !this.eleObjects[index].visible;
}

Вот последняя демонстрация: https://jsbin.com/jiduzoduri/1/edit?html,js,output

0 голосов
/ 09 декабря 2018

Как вы можете прочитать в других ответах, вы можете добавить свойство, чтобы увидеть, является ли оно видимым или нет.Другой способ заключается в том, что вы можете проверить CSS и изменить его в зависимости от того, является ли он block или none

let elementList = new Vue({
  el: "#elements",
  data: {
    eleObjects: [{
        name: "HTML5",
        description: "Used for front end web development more specifically for building the structure of a website"
      },
      {
        name: "CSS3",
        description: "Used for giving style to the HTML elements, their positioning and overall look of the website"
      },
      {
        name: "JavaScript 2015",
        description: "Used for event handling, functionality and dynamics of the website"
      },
      {
        name: "Vue JS",
        description: "JavaScript framework for component based programming which is used to create more dynamic websites"
      },
      {
        name: "Django.py",
        description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
      }
    ]
  },

  methods: {
    expand: function(e) {
      let h3Element = e.target.nextElementSibling;
      h3Element.style.display = (h3Element.style.display === 'block')? 'none':'block';
    }
  }
});
* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  list-style-type: none;
}

body {
  background: #003366;
}

#container {
  width: 1000px;
  margin: 100px auto;
}

#elements {
  width: 100%;
}

#elements li {
  display: inline-block;
  width: 40%;
  margin: 40px 5%;
  background: #FFF;
  color: #003366;
  box-shadow: 10px 10px 0px #222;
  user-select: none;
}

#elements li h1,
h3 {
  padding: 10px 20px;
}

#elements li h3 {}

#elements li h1 {
  cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<body>
  <div id="container">
    <ul id='elements'>
      <li v-for="(eleObject,i) in eleObjects">
        <h1 v-on:click="expand($event)" v-text="eleObject.name"></h1>
        <h3 v-text="eleObject.description" v-show="eleObject.show"></h3>
      </li>
    </ul>
  </div>
</body>
0 голосов
/ 09 декабря 2018

В хуке mounted необходимо изменить элементы массива eleObjects, добавив новое поле с именем show, которое изначально false, и вы используете условный рендеринг с использованием v-show, а затем при нажатии на определенныйпункт будет расширен 

let elementList = new Vue({
  el: "#elements",
  data: {
    eleObjects: [{
        name: "HTML5",
        description: "Used for front end web development more specifically for building the structure of a website"
      },
      {
        name: "CSS3",
        description: "Used for giving style to the HTML elements, their positioning and overall look of the website"
      },
      {
        name: "JavaScript 2015",
        description: "Used for event handling, functionality and dynamics of the website"
      },
      {
        name: "Vue JS",
        description: "JavaScript framework for component based programming which is used to create more dynamic websites"
      },
      {
        name: "Django.py",
        description: "Python framewrok used for the backend of the website aka storing data, displaying data templates etc..."
      }
    ]
  },

  methods: {
    expand: function(el, i) {
      el.show = true;

      this.$set(this.eleObjects, i, el);
    }
  },
  mounted() {
    this.eleObjects = this.eleObjects.map(e => {
      let t = e;
      e.show = false;
      return t;
    });
  }
});
* {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  list-style-type: none;
}

body {
  background: #003366;
}

#container {
  width: 1000px;
  margin: 100px auto;
}

#elements {
  width: 100%;
}

#elements li {
  display: inline-block;
  width: 40%;
  margin: 40px 5%;
  background: #FFF;
  color: #003366;
  box-shadow: 10px 10px 0px #222;
  user-select: none;
}

#elements li h1,
h3 {
  padding: 10px 20px;
}

#elements li h3 {}

#elements li h1 {
  cursor: pointer;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<body>
  <div id="container">
    <ul id='elements'>
      <li v-for="(eleObject,i) in eleObjects">
        <h1 v-on:click="expand(eleObject,i)" v-text="eleObject.name"></h1>
        <h3 v-text="eleObject.description" v-show="eleObject.show"></h3>
      </li>
    </ul>
  </div>
</body>
...