Управление внедренным HTML с помощью vue.js и axios

Question

Я пишу страницу с vue.js и axios, чтобы получить содержимое самого нового поста из категории сайта WP с помощью REST API.Содержание сообщения всегда является упорядоченным списком (OL).Элементы введенного OL будут отображаться в виде карусели.OL успешно введен, но не может быть изменен.Есть ли кто-нибудь любезно указать на проблему в JS, которую я написал?Эту задачу легко выполнить с помощью jQuery, но я просто хочу попрактиковаться в чем-то новом.

HTML:

<div class="frame ajax annoucements">
  <h1 id="announcements-title" class="material ajax-title">Announcements<span class="title-this-week"></span></h1>
  <div id="app" class="ajax-body material" v-html="posts[0].content.rendered">
  </div>
</div>

JS:

var tcnt = 0;

new Vue({
  el: '#app',
  data: {
    posts: []
  },
  created() {
    axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
    .then((response) => {
      var categoryId = 0;
      response.data.forEach(function(category){
        if (category.slug == 'announcements') {
          categoryId = category.id;
          console.log('Category ID: ' + category.id);
        }
      });
      return categoryId;
    })
    .then((categoryId) => {
      console.log(categoryId);
      return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
        params: {
          categories: categoryId,
          per_page: 1,
          status: 'publish'
        }
      });
    })
    .then((response) => {
      console.log(response.data);
      this.posts = response.data;
    })
    .catch((error) => {
      console.log(error.message);
    })
  },
  mounted() {
    var announcements = document.querySelectorAll('frame.ajax .ajax-body > ol > li');
    console.log(announcements.length);
    setInterval(function(){
      var target = announcements.length % tcnt;
      for (i = 0; i < announcements.length; i++) {
        if (i == target) {
          announcements[i].style.display = 'block';
        }
        else {
          announcements[i].style.display = 'initial';
        }
      }
      tcnt++;
    }, 1000);
  }
});

Любая помощьс благодарностью.

Answer 1

приведу пример для карусели без jQuery и любых операций DOM:

var app = new Vue({
	el: '#app',
	data() {
		return {
			list: [1,2,3,4],
			curIndex: 0
		}
	},
	created () {
		window.setInterval(_=>{
			if(this.curIndex+1>this.list.length-1){
				this.curIndex = 0;
			}else{
				this.curIndex++
			}
		},3000)
	}
})

.wrapper{
		width: 200px;
		height: 100px;
		position: relative;
	}
	.wrapper>div{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100px;
		line-height: 100px;	
		text-align: center;
		color: #fff;	
	}
	.wrapper>div:nth-child(1){
		background: red;
	}
	.wrapper>div:nth-child(2){
		background: blue;
	}
	.wrapper>div:nth-child(3){
		background: orange;
	}
	.wrapper>div:nth-child(4){
		background: yellow;
	}
	.fade-enter,.fade-leave-active{
		opacity: 0;
	}
	.fade-enter-active,.fade-leave-active{
		transition: opacity .5s ease-in-out;
	}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  	<transition-group tag="div" class="wrapper" name="fade">
  		<div v-for="(item,index) of list" :key="index" v-show="index==curIndex">
			{{item}}
		</div>
	</transition-group>
</div>

Answer 2

Это проблема времени.

Вам нужно будет понять асинхронную природу Javascript ./

Когда вы делаете document.querySelectorAll('frame.ajax .ajax-body > ol > li') в смонтированном хуке, запрос ajax, вероятно, еще не ответил.Поэтому элементы DOM еще не существуют , и они не работают должным образом.

Мое предложение состоит в том, чтобы поместить коды для манипуляции DOM в метод и вызвать его после того, как запрос ajax

См. listManipulation метод:

var tcnt = 0;

new Vue({
    el: '#app',
    data: {
        posts: []
    },
    created() {
        axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
            .then((response) => {
                var categoryId = 0;
                response.data.forEach(function(category) {
                    if (category.slug == 'announcements') {
                        categoryId = category.id;
                        console.log('Category ID: ' + category.id);
                    }
                });
                return categoryId;
            })
            .then((categoryId) => {
                console.log(categoryId);
                return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
                    params: {
                        categories: categoryId,
                        per_page: 1,
                        status: 'publish'
                    }
                });
            })
            .then((response) => {
                console.log(response.data);
                this.posts = response.data;
                this.$nextTick(() => {
                    this.listManipulation();
                })
            })
            .catch((error) => {
                console.log(error.message);
            })
    },
    methods: {
        listManipulation() {
            var announcements = document.querySelectorAll('frame.ajax .ajax-body > ol > li');
            console.log(announcements.length);
            setInterval(function() {
                var target = announcements.length % tcnt;
                for (i = 0; i < announcements.length; i++) {
                    if (i == target) {
                        announcements[i].style.display = 'block';
                    } else {
                        announcements[i].style.display = 'initial';
                    }
                }
                tcnt++;
            }, 1000);
        }
    }
});

$ nextTick означает, что сначала нужно обновить DOM, а затем выполнить код внутри.

---

Также считается плохой практикой манипулировать DOM напрямую в проекте Vue.Потому что Vue отслеживает изменения DOM, используя Virtual DOM.Если вы измените DOM, Vue не будет отслеживать это и может перезаписать модификацию при следующем обновлении.

Поскольку вы управляете дисплеем, вам следует проверить v-if