Nuxt.js 데이터 양방향 귀속

처음에 mounted () 를 통해 문자열을 페이지에 렌더링하는 것이 필요하지만, 작업 후에 데이터를 수정하고, 얻은 결과를 다시 다른 방식으로 페이지에 렌더링해야 한다. 새로 고침된 페이지를 돌려서 다시 렌더링하는 것이 아니라.
우선 템플릿에서 데이터 () 에 정의된 데이터를 표시하고 정의된 데이터를 표시합니다

    export default {
      data(){
        return {
          text: '',
          newText: '1'
        }
      },
      async mounted(){
          let {status,data:{text}} = await self.$axios.post('/getText');
          this.text = text;
      }
    }

그리고 우리는methods의 함수를 통해 백엔드의 데이터를 얻는다

methods:{
    async click(){
        let {status,data:{text}} = await self.$axios.post('/updateText',{
            text,
            newText
        })
     
        this.text = text;
    }
    
}

서비스 측의 인터페이스는 다음과 같다.

router.get('/getText', async (ctx) => {
    let text= await Text.find();
    ctx.body = {
        text
    }
}

router.post('/updateText', async (ctx) => {
  const {text,newText} = ctx.request.body;
  let oldVal = text;
  let newVal = newText;

  let ncomment = await Comment.updateOne(oldVal,newVal);

  let text= await Text.find();

  ctx.body={
    text
  }
})

여기 포인트가 있어요!페이지에서 전송된 인자를 가져올 때 구조적인 값을 부여하는 방법을 사용해야 합니다. 그렇지 않으면 Object로 가져오면 조회가 잘못됩니다.
양방향 귀속은 다음과 같습니다. 처음에 mounted () 를 통해 데이터를 템플릿에 렌더링한 다음에 함수를 호출하여 서비스 측의 업데이트 Text 인터페이스를 통해 데이터를 바꾸고 업데이트 Text 인터페이스에서 데이터를 업데이트한 후에 검색을 한 번 실행하여 검색 결과를 트리거한 함수로 되돌려줍니다.이 함수에서 데이터 () 중text의 값을 수정하여 데이터 양방향 귀속 효과에 도달합니다