Блог

Главная - Вопросы по программированию - Как считать с помощью Javascript

Как считать с помощью Javascript

#javascript #html #css #vue.js

Вопрос:

Эй, ребята, у меня проблема с моим кодом. У меня есть один основной компонент, в котором у меня есть различные подкомпоненты, подобные этому:

 <template>
 <div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>
</template>

v-if-это потому, что я хочу шаг за шагом визуализировать только один компонент во внешнем интерфейсе. Поэтому, когда я запускаю свое приложение, я показываю только первый компонент, когда я нажимаю «Далее», я показываю второй компонент и так далее.

Теперь мне нужен индикатор страницы, поэтому я должен посчитать дочерние теги div «контейнера». Для этого я уже пробовал эти варианты:

  1. var count = $("#container div").length; //возвращает 0
  2. var count2 = $("#container").children().length; //возвращает 2

Эти результаты являются ложными, потому что реальный результат будет 4, потому что в div 4 ребенка. Я думаю, что проблема в том, что не все остальные компоненты визуализированы, но как я могу решить эту проблему?

Комментарии:

1. Добавьте атрибут данных в div, чтобы указать страницу, и извлеките его из атрибута набора данных элемента. ` <div v-if=данные о состоянии-страница=»N»>`

2. подсчитайте различия просто путем раздражения объекта, подобного arry или массиву

3. Вы используете здесь Vue?

4. @дейв да,именно так

5. попробуйте это : Object.values($(«#контейнер»).Дочерние узлы). фильтр(x => x.Имя узла === «DIV»). длина

Ответ №1:

Учитывая, что вы используете Vue, я бы использовал счетчик в вашем объекте данных, чтобы отслеживать, где вы находитесь, а затем просто увеличивал его при нажатии кнопки, чтобы перейти к следующему шагу:

 new Vue({
  el: "#app",
  data: {
    currentStep: 1
  },
  methods: {
    increaseStep() {
      if (this.currentStep > 4) {
        return;
      }
      this.currentStep  ;
    }
   }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container">

    <div v-if="currentStep >= 1">Step 1</div>
    <div v-if="currentStep >= 2">Step 2</div>
    <div v-if="currentStep >= 3">Step 3</div>
    <div v-if="currentStep >= 4">Step 4</div>
    
    <button v-on:click="increaseStep">Next step</button>

  </div>


</div>

Комментарии:

1. Что делать, если он достигнет шага 4 и пользователь снова нажмет?

2. currentStep Значение будет продолжать увеличиваться, но в DOM не будет никаких изменений. Я обновил ответ, чтобы превратить его в метод, который проверяет currentStep значение.

Ответ №2:

 var count = $("#container div").length;
document.write(count); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>

Ответ №3:

Проверил то же самое, но, похоже, это работает для меня.

Вероятно, вам нужно проверить длину после того, как документ будет готов. Я имею в mounted виду метод жизненного цикла.

Но использование jQuery внутри другой библиотеки-не лучший способ сделать это, если только нет альтернативы.

Поэтому в этом случае вы можете использовать собственный JS, чтобы найти количество div внутри контейнера.

 $(document).ready(function(){

  console.log($("#container div").length);
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>
Метки: