Answers.Body: <p>You can maintain state within your component either by using a hidden input field:</p>
  <pre><code>{{ hiddenInput('count', count) }}
  </code></pre>
  <p>Or by adding another <code>s-val</code> attribute to each button.</p>
  <pre><code>&lt;button sprig s-val:count=&quot;{{ count + 3 }}&quot; s-val:offset=&quot;{{ offset }}&quot;&gt;
      ...
  &lt;/button&gt;
  
  &lt;button sprig s-val:offset=&quot;{{ offset + 3 }}&quot; s-val:count=&quot;{{ count }}&quot;&gt;
      ...
  &lt;/button&gt;
  </code></pre>
  <p>Since <code>s-val</code> is inherited, you can add it to a parent element for convenience.</p>
  <pre><code>&lt;div s-val:count=&quot;{{ count }}&quot; s-val:offset=&quot;{{ offset }}&quot;&gt;
      &lt;button&gt;...&lt;/button&gt;
      &lt;button&gt;...&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-06-06T19:48:21.903Z
Answers.LastActivityDate: 2022-06-07T07:59:12.427Z
Answers.LastEditDate: 2022-06-07T07:59:12.427Z
Answers.UserDisplayName: Ben Croker
Body: <p>I Have a sprig component that has two variables, but the moment Sprig changes one of them, the other value resets. Please Help</p>
  <p>products.twig</p>
  <pre><code>{% extends &quot;_layout/base&quot; %}
  
  {% set wrapClass = 'category' %} 
  
  
  {% block body %}
  
      &lt;section class=&quot;spacer pt-6&quot;&gt;&lt;/section&gt;
      {% include &quot;_shared/breadcrumbs&quot; %}
      &lt;section class=&quot;spacer pt-6&quot;&gt;&lt;/section&gt;
      {{sprig(&quot;_shared/sprig2&quot;, {count: 20 })}}
  
  {% endblock %}
  </code></pre>
  <p>_sprig2.twig</p>
  <pre><code>{% set count = count ?? 12 %}
  {% set offset = offset ?? 0 %}
  
  
  &lt;button sprig  s-val:count=&quot;{{ count + 3 }}&quot;&gt;three more..
      {{count}}
  &lt;/button&gt;
  
      &lt;button sprig s-val:offset=&quot;{{ offset + 3 }}&quot;&gt;three more..
      {{offset}}
  &lt;/button&gt;
  
  
  {{ sprig.script }}
  </code></pre>
  <p>In this example, If I click count, offset resets and if I do offset, the count resets, Please Help.</p>
  
Tags: <craft3><plugin-sprig>
Title: Sprig resets value on render
ThreadText: # Sprig resets value on render
  
  (Asked by: username_0 on 2022-06-02)
  
  I Have a sprig component that has two variables, but the moment Sprig changes one of them, the other value resets. Please Help
  
  products.twig
  
  ```
  {% extends "_layout/base" %}
  
  {% set wrapClass = 'category' %} 
  
  {% block body %}
  
      <section class="spacer pt-6"></section>
      {% include "_shared/breadcrumbs" %}
      <section class="spacer pt-6"></section>
      {{sprig("_shared/sprig2", {count: 20 })}}
  
  {% endblock %}
  
  ```
  
  \_sprig2.twig
  
  ```
  {% set count = count ?? 12 %}
  {% set offset = offset ?? 0 %}
  
  <button sprig  s-val:count="{{ count + 3 }}">three more..
      {{count}}
  </button>
  
      <button sprig s-val:offset="{{ offset + 3 }}">three more..
      {{offset}}
  </button>
  
  {{ sprig.script }}
  
  ```
  
  In this example, If I click count, offset resets and if I do offset, the count resets, Please Help.
  
  **Tags:** craft3, plugin-sprig
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2022-06-06. Score: 2 | Accepted answer
  
  You can maintain state within your component either by using a hidden input field:
  
  ```
  {{ hiddenInput('count', count) }}
  
  ```
  
  Or by adding another `s-val` attribute to each button.
  
  ```
  <button sprig s-val:count="{{ count + 3 }}" s-val:offset="{{ offset }}">
      ...
  </button>
  
  <button sprig s-val:offset="{{ offset + 3 }}" s-val:count="{{ count }}">
      ...
  </button>
  
  ```
  
  Since `s-val` is inherited, you can add it to a parent element for convenience.
  
  ```
  <div s-val:count="{{ count }}" s-val:offset="{{ offset }}">
      <button>...</button>
      <button>...</button>
  </div>
  
  ```
  
  
  ---
  
  