Подкомпонент Vue.js не реагирует на вложенный SVG - PullRequest
Новая
       11

Подкомпонент Vue.js не реагирует на вложенный SVG

0 голосов
/ 19 июня 2019

У меня есть SVG-диаграмма в шаблоне Vue.js с вложенными нарисованными кругами, символизирующими двери.Когда двери открыты, цвет обводки / заливки должен быть ЗЕЛЕНЫМ;& когда ЗАКРЫТО, цвет обводки / заливки должен быть КРАСНЫМ.Когда мои данные R / T прибывают (то есть к клиентскому плагину SignalR).Мне нужно установить состояние и вычислить цвета, которые я делаю, но цвета не перерисовываются.Какие-либо предложения?Я использую Vue.js 2.9.6.Спасибо

Я пробовал вычислительные свойства, а также часы.Поля data () обновляются, но связанные цвета не реагируют.

В шаблоне 

    <div class="VcSchematicAccessControlRedundantImg" >            

        <svg :width="widthImg" :height="heightImg" viewBox="0 0 1000 1000"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >       
            <image xlink:href="static/img/PNID_AccessControl_Redundant.svg" height="100%" width="100%" />

        <circle cx="288.0"  cy="504.0"  r="9" stroke-width="3" :stroke="r2aColor"  :fill="r2aColor"  />    
        <circle cx="670.0"  cy="530.0"  r="9" stroke-width="3" :stroke="r2bColor"  :fill="r2bColor"  />
        <circle cx="352.0"  cy="874.0"  r="9" stroke-width="3" :stroke="r3Color"   :fill="r3Color"   />
        <circle cx="949.0"  cy="546.0"  r="9" stroke-width="3" :stroke="r7Color"   :fill="r7Color"   />
        <circle cx="565.7"  cy="580.0"  r="9" stroke-width="3" :stroke="r8Color"   :fill="r8Color"   />
        <circle cx="430.0"  cy="455.7"  r="9" stroke-width="3" :stroke="r9Color"   :fill="r9Color"   />            



        </svg>            


    </div>

Мне нужно получить чертеж для повторного рендеринга каждого цикла обновления с данными из клиента SignalR.Примечание: мой плагин SignalR Client & Vue.js работает нормально.Что-то здесь не так с реактивностью Vue.js.

1 Ответ

0 голосов
/ 19 июня 2019

Как насчет добавления ключа к компоненту, который вы хотите перерисовать?С некоторыми свойствами вы хотите принудительно перерисовать и изменить ключ этого компонента.Например, 

  <template>
    <div :key="updateCounter" >
      {{someContent}}
    </div>
  </template>
  <script>
    export default {

    data() {
      return {
        updateCounter: 0
      };
    },
    computed: {
      valueToWatch() {some dynamic value}
    },
    watch: {
      valueToWatch() {
        this.updateCounter += 1 
      }
    }
  </script>

Вот отличная статья о принудительном рендеринге Правильный способ заставить Vue перерисовать компонент

...