Vue에서 ToolTip을 동적으로 괴롭히려고 노력했습니다.

시행 착오 단계도 문장화되어 있으므로 서둘러 마지막 요약하십시오.

시행착오

Try1

우선 평범하게 해보자

<div id="app">
    <button class="btn" data-toggle="tooltip" title="Tooltip">hoge</button>
    <button class="btn" data-toggle="tooltip" v-bind:title="date">fuga</button>
    <button class="btn btn-primary" @click="update">更新</button>
</div>


<!-- (includeとかは略) -->
<script>
    new Vue({
        el: '#app',
        data: {
            date: '',
        },
        methods: {
            update: function(){
                date=new Date().toString();
                $('[data-toggle="tooltip"]').tooltip();
            }
        }
    });
</script>

이 소스를 작성하여 브라우저에서 엽니 다.
결과는...
See the Pen maOXQm by Ibuki (ㅎㅎㅎ) on CodePen .


동적으로 조작하는 분은 동작하지 않습니다!!

검증과 고찰

Chrome의 devTool을 살펴 보겠습니다.



어라, title의 내용, 둘 다 없네요…

전자는 대신 속성 data-original-title에 내용을 포함하는 것으로 보입니다. ¹

Try2

에서는 data-original-title에 데이터를 바인딩하면 잘 작동합니까?

See the Pen Vue and Bootstrap Tooltip test 2 by Ibuki ( ㅎㅎㅎ )) on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

불행히도 여기는 안됩니다. 분명히 제목 요소를 복사하여 덮어 쓴 것 같습니다.

검증과 고찰

tooltip 호환 메소드는 DOM 그리기 전에 호출되는 것처럼

DOM 그리기 후에 호출되는 것이 좋습니다.

Try3

조사해 보면 Vue에는 updated라는 것이있는 것 같습니다.

공식에 따르면

데이터가 변경된 후 가상 DOM이 다시 그려지고 패치를 적용하여 호출됩니다.

이 후크가 불려 가면(자), 컴퍼넌트의 DOM 는 갱신한 상태가 되어, 이 후크로 DOM 에 의존하는 조작을 실시할 수가 있습니다.

그럼 이것을 사용해 보겠습니다.

See the Pen Vue and Bootstrap Tooltip test 3 by Ibuki ( ㅎㅎㅎ )) on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

이번에 이렇게 갔던 것 같습니다!

요약

$(...).tooltip()는 updated에서 호출해야합니다.